Отступы во вложенных списках в HTML/CSS

Я начал использовать Twitter Bootstrap, который мне полезен (как программист), чтобы получить достойный сайт без необходимости писать много CSS.Отступы во вложенных списках в HTML/CSS

Однако что-то сводит меня с ума. У меня есть вложенный список, как

<ul> 
    <li>Hello</li> 
    <li>World 
    <ul> 
     <li>Wide</li> 
     <li>Web</li> 
    </ul> 
    </li> 
</ul>

Но первый и второй уровень этого списка не получает отступа по-разному (то есть. Они совмещаться друг с другом на левой стороне)

В обычном HTML вложенных списков, глубже подсписные отступы больше. Но что-то в таблице стилей должно быть отключено. Как найти, что контролирует это? Я не вижу атрибута «indent» списка «CSS» для элементов li в любой документации.

источник

2012-02-27 interstar

Можете ли вы воспроизвести в JSFiddle. Ваш код с twitter bootstrap отлично подходит для меня: http://jsfiddle.net/3hHwF/ –

Вы хотите установить padding-left:

li { padding-left: 1em; }

будет отступа каждый Li 1em. Поскольку внутренние lis уже смещены от внешнего lis, он должен делать то, что вы хотите.

источник

2012-02-27 22:27:55

Просто используйте Firebug в FF или Chrome dev-tools: щелкните правой кнопкой мыши по вашей цели и select inspect элемент. Вы можете визуально и текстовым образом проверить свойства CSS, чтобы увидеть, что вызывает крах.

Вы, вероятно, хотите правило, как

ul > li { 
    margin-left: 10px; 
}

источник

2012-02-27 22:28:20 paislee

Просто, чтобы добавить к выше ответам: padding-left будет отступ слова, но не пули, а margin-left будет отступ точки пули, а также.

Пример: http://jsfiddle.net/GMLxv/

источник

2013-04-15 08:10:11 evophage

У меня была такая же проблема, как и вы.

Там это правило в type.less, который отменяет отступ для списков:

ul, ol { 
    padding: 0; 
    margin: 0 0 @baseLineHeight/2 25px; 
}

Я закончил тем, перекрывая это правило:

ul, ol { 
    padding: 0px 25px; 
}

отступов в вложенных списков теперь обратно.

источник

2013-04-19 05:31:20

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

CSS-применять его: ul { list-style-position: inside; }

Подробнее о list-style-position.

Пример: https://jsfiddle.net/g0k0obwh/

источник

2015-09-16 21:27:17 Marius

Может быть, какой-то стиль устанавливает это для того или другого ... просто примените ваши явные настройки, возможно. – Marius

Использование Bootstrap вы могли бы сделать это путем кодирования следующим образом. Просто вставьте его в JSP или HTML и протестируйте его. Вы можете перейти по этой ссылке для получения дополнительной информации.

http://www.bootply.com/DglnYJTSKA

<div id="MainMenu"> 
     <div class="list-group panel"> 
      <a href="#demo3" class="list-group-item list-group-item-success" data-toggle="collapse" data-parent="#MainMenu">Item 3</a> 
      <div class="collapse" id="demo3"> 
      <a href="#SubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubMenu1">Subitem 1 <i class="fa fa-caret-down"></i></a> 
      <div class="collapse list-group-submenu" id="SubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 1 a</a> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 2 b</a> 
       <a href="#SubSubMenu1" class="list-group-item" data-toggle="collapse" data-parent="#SubSubMenu1">Subitem 3 c <i class="fa fa-caret-down"></i></a> 
       <div class="collapse list-group-submenu list-group-submenu-1" id="SubSubMenu1"> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 1</a> 
       <a href="#" class="list-group-item" data-parent="#SubSubMenu1">Sub sub item 2</a> 
       </div> 
       <a href="#" class="list-group-item" data-parent="#SubMenu1">Subitem 4 d</a> 
      </div> 
      <a href="javascript:;" class="list-group-item">Subitem 2</a> 
      <a href="javascript:;" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo4" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 4</a> 
      <div class="collapse" id="demo4"> 
      <a href="" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
      <a href="#demo5" class="list-group-item list-group-item" data-toggle="collapse" data-parent="#MainMenu">Item 5</a> 
      <div class="collapse" id="demo5"> 
      <a href="#" class="list-group-item">Subitem 1</a> 
      <a href="" class="list-group-item">Subitem 2</a> 
      <a href="" class="list-group-item">Subitem 3</a> 
      </div> 
     </div> 
     </div>

CSS:

.list-group.panel > .list-group-item { 
    border-bottom-right-radius: 4px; 
    border-bottom-left-radius: 4px 
} 
.list-group-submenu { 
    margin-left:20px; 
}

источник

2016-07-11 03:54:58

ли простой способ использования группе списка

это дает вложенный список:

<ul class="list-group"> 
     <li class="list-group-item">Cras justo odio</li> 
     <li class="list-group-item"> 
       <ul class="list-group"> 
        <li class="list-group-item">Cras justo odio</li> 
        <li class="list-group-item"> 
         <ul class="list-group"> 
          <li class="list-group-item">Cras justo odio</li> 
          <li class="list-group-item">Dapibus ac facilisis in</li> 
         </ul> 
        </li> 

      </ul> 
     </li> 
     <li class="list-group-item">Morbi leo risus</li> 
     <li class="list-group-item">Porta ac consectetur ac</li> 
     <li class="list-group-item">Vestibulum at eros</li> 
</ul>

источник

2016-07-11 06:04:12 pradeep

Отступы во вложенных списках в HTML/CSS

ответ

Смежные вопросы