Почему padding-left не работает в моем простом случае?

#html #css

#HTML #css

Вопрос:

У меня очень простой макет, всего два неупорядоченных списка с помощью <ul><li> , каждый из которых находится внутри <div> .

 <div id="main">
    <div id="fist-list">
        <ul id="colors">
            <li id="white">White</li>
            <li id="green">Green</li>
        </ul>
    </div>
    <div id="second-list">
        <ul id="numbers">
            <li id="one">One</li>
            <li id="two">Two</li>
        </ul>
    </div>
</div>

 li{
  float: left;
  width: 30px;
}
#second-list{
  padding-left:30px;
}

вы можете проверить мой простой код здесь .

Я пытался использовать CSS padding-left , чтобы отделить два списка на расстоянии 30 пикселей друг от друга, но мой CSS не работает, почему?

1. Пожалуйста, убедитесь, что ваши вопросы можно понять, не отправляя пользователей на другой сайт. Очень немногие сайты могут похвастаться идеальным временем безотказной работы на 100% (меньше всего jsFiddle).

2. вы хотите #fist-list , чтобы и #second-list перемещались влево?

3. Почему бы вам просто не использовать margin, чтобы разделить их?

4. @Leem.fin; я знаю, что вы принимаете ответ, но знаете ли вы, почему возникает эта проблема.

5. @ sandeep, я не знаю, поэтому я прокомментировал, что мне нужно больше объяснений.

Ответ №1:

Если вы все еще хотите, чтобы значение с плавающей точкой в

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

вот так:

 #second-list{
  padding-left:30px;
  float:left
}

Тем не менее, я бы сделал это по-другому, но мне нужно посмотреть, чего вы хотите достичь. У вас есть его изображение?

1. Чего я хочу добиться, так это иметь две группы горизонтальных вкладок (вот почему мне обязательно нужен float), которые сделаны из ui li, тогда я хотел бы разделить две группы вкладок, поэтому в моем коде exmaple указано, что я хочу

2. Также неплохо, если вы можете объяснить логику, лежащую в основе вашего кода. Спасибо.

3. Поскольку я пока не видел ни одного хорошего решения, я выбрал это… Я все еще с нетерпением жду, чтобы услышать больше

4. Взгляните на эту статью: complexspiral.com/publications/containing-floats это объясняет вашу проблему 🙂

Ответ №2:

Здесь есть несколько проблем:

Вы используете Float, который разрушает макет

Div являются элементами уровня блока и, следовательно, всегда будут прерывать строку.

Просто удалите float и сделайте div встроенными блоками, например:

http://jsfiddle.net/a8dy6/12/

удачи!

1. Но по какой-то причине мне нужен float . Как решить проблему, не удаляя значение с плавающей точкой.

2. встроенный блок работает практически во ВСЕХ браузерах, начиная с IE6, а доля использования IE6 составляет около 2% по всему миру. Пришло время отпустить.

3. Чего я хочу добиться, так это иметь две группы горизонтальных вкладок (вот почему мне обязательно нужен float), которые сделаны из ui li, тогда я хотел бы разделить две группы вкладок

4. Зачем вам для этого нужен float? Разве это не то, что вам нужно? jsfiddle.net/6Qem8/1

Ответ №3:

напишите overflow:hidden в you div clear , потому что это child's float

 div{overflow:hidden}
#second-list, #fist-list{float:left}

проверьте это http://jsfiddle.net/sandeep/a8dy6/18 /

Редактировать: согласно вашему комментарию ниже

  li{clear:left;}

проверьте это http://jsfiddle.net/sandeep/a8dy6/19 /

Редактировать:

Причина: на самом деле #second-list принимает padding

если вы определяете элемент float , то в clear parent противном parent случае он должен рухнуть.

проверьте это, когда этого не произошло clear the parent http://jsfiddle.net/sandeep/a8dy6/22 /

Итак; вы должны очистить его parent , когда child есть float .

проверьте это после clear parent http://jsfiddle.net/sandeep/a8dy6/23 /