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

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

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

В общем, проблема в том, что я тупой (и не только), не могу понять как сделать чтобы в 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, а соответственно и блоками с информацией и вьювером... Классам лучше давать имена строчными буквами, меньше вероятности сделать ошибку при определении стилей... Ну и текст лучше использовать тот, который будет использоваться при вёрстке макета, а не случайные наборы букв...

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

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

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

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

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

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

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

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

Решение