Как сделать чтобы рядом с width:auto блоком, в одной строке находился другой

@gen1usqq · Регистрация: 11.12.2014

Author24 — интернет-сервис помощи студентам

В общем, проблема в том, что я тупой (и не только), не могу понять как сделать чтобы в 1 строке располагалась ссылка с шириной Auto, и в той же строке был блок div, содержащий как бы кнопки управления. И чтобы при изменении размеров браузера и др. они всегда были на 1 строке.

Я прикреплю картинку как необходимо.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="col-md-5">
 <li class="articleCategory">Основы</li>
 <li>
  <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
  <div style="float:right">
   <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
   <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
   <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
  </div>
  <div class="articleSummary">
   sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
  </div>
 </li>
 <li>
  <a class="glyphicon glyphicon-plus" href="/Manage/AddArticle" style="color:#3c763d;float:right;"></a>
 </li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
.articles > ul > li > a.admin {
    border:1px solid black;
    display:inline-block;
}
ul > li > .articleSummary {
    text-align:justify;
    word-wrap: break-word;
    padding-top:3px;
    padding-bottom:15px;
    color:#515862;
}

Буду очень благодарен за вашу помощь!

@Fedor92 · 06.03.2017, 11:43

gen1usqq, очень жестокая вёрстка... Попробуйте float:right заменить на display:inline-block...

@gen1usqq · 06.03.2017, 12:41 **[ТС]**

Но тогда блок с кнопками управления не будет справа в углу.

@Fedor92 · 06.03.2017, 12:46

gen1usqq, что Вам мешает родительскому блоку задать:

CSS
1
.articleCategory{text-align:right}

@gen1usqq · 06.03.2017, 12:48 **[ТС]**

Вот я попробовал с вашим вариантом, и это не то чего я хотел.

@gen1usqq · 06.03.2017, 12:51 **[ТС]**

А при чём тут articleCategory если это "Введение" "Основы", там мне менять ничего не надо, я же выделил на скрине раньше, как необходимо чтобы было.

@Fedor92 · 06.03.2017, 13:09

Сообщение от gen1usqq

Вот я попробовал с вашим вариантом, и это не то чего я хотел.

При том, что в Вашем коде чёрт ногу сломит... Не видно ни отступов, ни вложенности, семантика вообще где-то нервно курит... Сделал поправку на бутстрап:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
    ul{
        list-style: none;
    }
    .articles > ul > li > a.admin {
        border:1px solid black;
        display:inline-block;
    }
    ul > li > .articleSummary {
        text-align:justify;
        word-wrap: break-word;
        padding-top:3px;
        padding-bottom:15px;
        color:#515862;
    }
    .view{
        float:right;
    }
    ul li:nth-child(2) div a{padding-right:0 !important}
    </style>
</head>
<body>
    <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li>
            <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li>
            <a class="glyphicon glyphicon-plus" href="/Manage/AddArticle" style="color:#3c763d;float:right;"></a>
        </li>
    </ul>
</body>
</html>

@gen1usqq · 06.03.2017, 14:19 **[ТС]**

CSS
1
2
3
ul li:nth-child(2) div a {
    padding-right:10px !important;
}

Сделал как вы посоветовали, но результат совсем не тот который необходим. Я приложу скрин.

@Fedor92 · 06.03.2017, 14:32

Сообщение от gen1usqq

Я приложу скрин.

Лучше бы полный код приложили...

@gen1usqq · 06.03.2017, 14:41 **[ТС]**

попробуйте уменьшить масштаб или разрешение и оно у вас должно поплыть. Отпишите пожалуйста, как проверите, если что я скину фул код страницы. Я уже просто устал от того что я не могу решить эту задачу

@Fedor92 · 06.03.2017, 14:46

gen1usqq, у Вас ссылка статична и имеет свойство word-wrap: break-word соответственно и меню для вьювинга будет падать под неё...

Можно сделать такую залипуху на худой конец, но на мобилах необходимо прописать медиазапросы:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
    ul{
        list-style: none;
    }
    .articles > ul > li > a.admin {
        border:1px solid black;
        display:inline-block;
    }
    ul > li > .articleSummary {
        text-align:justify;
        padding-top:3px;
        padding-bottom:15px;
        color:#515862;
    }
    .view{
        position:absolute;
        top:0;
        right:0
    }
    .box{
        position:relative
    }
    .admin{padding-right:70px}
    ul .box div a{padding-right:0 !important}
    </style>
</head>
<body>
    <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
         <li class="box">
            <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li class="box">
            <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li>
            <a class="glyphicon glyphicon-plus" href="/Manage/AddArticle" style="color:#3c763d;float:right;"></a>
        </li>
    </ul>
    <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
         <li class="box">
            <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li class="box">
            <a class="admin" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li>
            <a class="glyphicon glyphicon-plus" href="/Manage/AddArticle" style="color:#3c763d;float:right;"></a>
        </li>
    </ul>
</body>
</html>

@Al_lord · 06.03.2017, 14:55

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style type="text/css">
  .test{
    width: 100%;
    height: 10px;
    background: #f00;
    box-shadow: inset 0px 0px 0px 1px #000;
  }
  ul{
    padding: 0px;
  }
  li{
    display: inline-block;
    width: 100%;
  }
  .li2{
    margin-right: -154px;
    padding-right: 154px;
  }
  .li3{
    width: 150px;
  }
  *   {
      webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
</style>
 
<ul>
  <li>
    <div class="test"></div>
  </li>
  <li class="li2">
    <div class="test"></div>
  </li>
  <li class="li3">
    <div class="test"></div>
  </li>
</ul>

Просто пища для размышления.
А вообще исходя из такой верстки, то по нормальному - никак
вы самый нижний li хотите поставить рядом с самым верхним, игнорируя промежуточный. Это нормально не сделать.... хотя можно дать ul pos-r, нижнему li pos-a, выровнить и первому дать padd-right

@Fedor92 · 06.03.2017, 14:57

gen1usqq, можно попробовать покомбинировать с бутстрапом, кстати... Самый верный вариант... К примеру так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
    ul{
        list-style: none;
    }
    .articles > ul > li > a.admin {
        border:1px solid black;
        display:inline-block;
    }
    ul > li > .articleSummary {
        text-align:justify;
        padding-top:3px;
        padding-bottom:15px;
        color:#515862;
    }
    .box{
        position:relative
    }
    ul .box div a{padding-right:0 !important}
    .col-sm-12, .col-sm-10, .col-xs-12{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .view{
        text-align: right;
    }
    </style>
</head>
<body>
    <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
      </ul>
      <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
      </ul>
</body>
</html>

Естественно обнуление отступов сделать с помощью no-gutter... Код просто на коленке...

@gen1usqq · 06.03.2017, 15:55 **[ТС]**

Я конечно извиняюсь очень, за тупость свою, но всё же я решил скопировать ваш код, уже после того как в своём сайте применил, и нашёл баг какой-то и не знаю как его решить, мб вы уже добьёте?)
Сорри за трату вашего времени, но пожалуйста подскажите.

В общем я удалил у вашего примера (последнего) текст в articleSummary и он крч поплыл как-бы. Скрин кидаю.

Текст в articleSummary он как бы справа а необходимо чтобы был по ширине или слева.

Вот если что Ваш код.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
    ul{
        list-style: none;
    }
    .articles > ul > li > a.admin {
        border:1px solid black;
        display:inline-block;
    }
    ul > li > .articleSummary {
        text-align:justify;
        padding-top:3px;
        padding-bottom:15px;
        color:#515862;
    }
    .box{
        position:relative
    }
    ul .box div a{padding-right:0 !important}
    .col-sm-12, .col-sm-10, .col-xs-12{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .view{
        text-align: right;
    }
    </style>
</head>
<body>
    <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdq
            </div>
        </li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj
            </div>
        </li>
      </ul>
      <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
      </ul>
</body>
</html>

@Fedor92 · 06.03.2017, 16:00

gen1usqq, не понял, что и куда уплыло, ну да ладно...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <style>
    ul{
        list-style: none;
    }
    .articles > ul > li > a.admin {
        border:1px solid black;
        display:inline-block;
    }
    ul > li > .articleSummary {
        text-align:justify;
        padding-top:3px;
        padding-bottom:15px;
        color:#515862;
    }
    .box{
        position:relative
    }
    ul .box div a{padding-right:0 !important}
    .col-sm-12, .col-sm-10, .col-xs-12{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .view{
        text-align: right;
    }
    </style>
</head>
<body>
    <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary col-sm-12 col-xs-12">
            sfkdjfdq
            </div>
        </li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary col-sm-12 col-xs-12">
            sfkdjfdklfjklj
            </div>
        </li>
      </ul>
      <ul class="col-md-5">
        <li class="articleCategory">Основы</li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary col-sm-12 col-xs-12">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
        <li class="box col-sm-12 col-xs-12">
            <a class="admin col-sm-10 col-xs-12" href="/Home/Articles?id=8">qweqwekj lksfjkldjfklsjfkljsdkl fjqjkl jqw klejqwkl jeqw      klejqwkljeqkleqweqweasdas</a>
            <div class="view col-sm-2 col-xs-12">
                <a class="glyphicon glyphicon-chevron-up text-info" data-ajax="true" data-ajax-mode="replace" data- ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=True"></a>
                <a class="glyphicon glyphicon-chevron-down text-info" data-ajax="true" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/ListOfArticles?id=8&amp;catId=2&amp;goUp=False" style="padding-right:20px;"></a>
                <a class="glyphicon glyphicon-pencil text-success" href="/Manage/EditArticle?id=8"></a><a class="glyphicon glyphicon-remove text-danger" data-ajax="true" data-ajax-confirm="Вы действительно хотите удалить данную статью?" data-ajax-mode="replace" data-ajax-update="#listOfArticles" href="/Manage/DeleteArticle?id=8" style="padding-right:20px;"></a>
            </div>
            <div class="articleSummary col-sm-12 col-xs-12">
            sfkdjfdklfjklj kljqwklejqklwjeklqjw kljasdkl jklqwqi roiqwueioqwuioe uqiow sdadioasiodaiosduioquwioeuqweq
            </div>
        </li>
      </ul>
</body>
</html>

@gen1usqq · 06.03.2017, 17:05 **[ТС]**

Да вот так в самый раз, спасибо огромное. Скажите плиз напоследок, почему моя вёрстка настолько убога? Отступы не смотрите, я просто скинул вам без отступов, а так всё норм.

@Fedor92 · 06.03.2017, 17:17

Сообщение от gen1usqq

Скажите плиз напоследок, почему моя вёрстка настолько убога?

Смотря с чем сравнивать... Если отбросить использование бутстрапа, то проще для всех элементов в li сделать обёртку:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
        <li>
            <div><a href=""></a></div>
            <div>
                <a href=""></a>
                <a href=""></a>
                <a href=""></a>
            </div>
        </li>
    </ul>
</body>
</html>

Так проще управлять содержимым в теге li, а соответственно и блоками с информацией и вьювером... Классам лучше давать имена строчными буквами, меньше вероятности сделать ошибку при определении стилей... Ну и текст лучше использовать тот, который будет использоваться при вёрстке макета, а не случайные наборы букв...

Новые блоги и статьи Все статьи Все блоги /
Неблокируемый стек в C++26: реализуем простой сборщик мусора stackOverflow 02.03.2025 Многопоточные приложения требуют надежных и производительных структур данных, способных эффективно работать в условиях конкурентного доступа. Неблокируемые структуры данных представляют собой особый. . .	Шаблон REQ/REP в ZeroMQ: сверхбыстрый обмен сообщениями в C++ и Python stackOverflow 02.03.2025 Построение высоконагруженных распределенных систем требует надежного и производительного механизма обмена сообщениями. ZeroMQ выделяется среди прочих решений своей невероятной скоростью работы и. . .	Нестандартные приемы работы с итераторами в C++ stackOverflow 02.03.2025 Итераторы - один из краеугольных камней C++, предоставляющий универсальный механизм обхода и манипуляции данными в контейнерах. Появившись как замена небезопасным указателям, они эволюционировали от. . .	Лексический анализ и регулярные выражения в C++26 stackOverflow 02.03.2025 Лексический анализ - ядро любого компилятора и инструмента обработки текста. Каждый программист сталкивается с задачами парсинга строк, обработки файлов конфигурации или анализа пользовательского. . .	Подробно о std::mdspan в C++23 stackOverflow 02.03.2025 Работа с многомерными массивами данных традиционно была одной из сложных задач в C++. Программистам приходилось создавать собственные абстракции или использовать сторонние библиотеки для эффективной. . .
Колмогоровская сложность в C++: Путь к совершенному коду stackOverflow 02.03.2025 Абстрактная математическая теория Колмогорова стала мощным средством оценки и улучшения программного кода. Сложность алгоритма - не только в его вычислительной эффективности, но и в том, насколько. . .	Изменения в C# 14 stackOverflow 02.03.2025 Одно из самых значимых изменений в C# 14 - поддержка коллекционных выражений, которые позволяют создавать и инициализировать коллекции с помощью нового лаконичного синтаксиса. Это нововведение. . .	Разработка кроссплатформенного мобильного приложения для iOS/Android на C++ bytestream 02.03.2025 C++ как язык программирования высокого уровня с прямым доступом к аппаратным ресурсам позволяет создавать приложения, работающие одинаково быстро как на iOS, так и на Android устройствах. Ни для кого. . .	Аутентификация/авторизация на Golang bytestream 02.03.2025 Go предлагает множество возможностей для создания надежных систем аутентификации. Встроенные криптографические пакеты, высокая производительность и простота параллельной обработки запросов делают его. . .	Нововведения TypeScript 5.8 bytestream 02.03.2025 TypeScript 5. 8 приносит много возможностей и оптимизаций, которые существенно расширяют границы типобезопасного программирования на JavaScript. Эта версия включает ряд значительных улучшений в работе. . .

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	06.03.2017, 11:43	2
	gen1usqq, очень жестокая вёрстка... Попробуйте float:right заменить на display:inline-block... 0

@gen1usqq 1 / 1 / 0 Регистрация: 11.12.2014 Сообщений: 135
	06.03.2017, 12:41 [ТС]	3
	Но тогда блок с кнопками управления не будет справа в углу. 0

@gen1usqq 1 / 1 / 0 Регистрация: 11.12.2014 Сообщений: 135
	06.03.2017, 12:48 [ТС]	5
	Вот я попробовал с вашим вариантом, и это не то чего я хотел. Миниатюры 0

@gen1usqq 1 / 1 / 0 Регистрация: 11.12.2014 Сообщений: 135
	06.03.2017, 12:51 [ТС]	6
	А при чём тут articleCategory если это "Введение" "Основы", там мне менять ничего не надо, я же выделил на скрине раньше, как необходимо чтобы было. 0

@Fedor92 2964 / 2620 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	06.03.2017, 14:32	9
	Сообщение от gen1usqq Я приложу скрин. Лучше бы полный код приложили... Миниатюры 0

@gen1usqq 1 / 1 / 0 Регистрация: 11.12.2014 Сообщений: 135
	06.03.2017, 14:41 [ТС]	10
	попробуйте уменьшить масштаб или разрешение и оно у вас должно поплыть. Отпишите пожалуйста, как проверите, если что я скину фул код страницы. Я уже просто устал от того что я не могу решить эту задачу 0

@gen1usqq 1 / 1 / 0 Регистрация: 11.12.2014 Сообщений: 135
	06.03.2017, 17:05 [ТС]	16
	Да вот так в самый раз, спасибо огромное. Скажите плиз напоследок, почему моя вёрстка настолько убога? Отступы не смотрите, я просто скинул вам без отступов, а так всё норм. 0

Как сделать чтобы рядом с width:auto блоком, в одной строке находился другой

Решение