Текучая компоновка с элементами навигации равномерной ширины - PullRequest
Новая
       10

Текучая компоновка с элементами навигации равномерной ширины

1 голос
/ 27 апреля 2011

Я создаю сайт для мобильных устройств и, следовательно, изменчивый макет. Мой список навигации выглядит так: 

<ul>
     <li>home</li>
     <li>about</li>
     <li>work</li>
     <li>contact</li>
</ul>

Проблема в том, что первый элемент списка должен быть только 100px (выровнен по левому краю всегда), а остальные 3 разделены равномерно, поэтому возможно иметь одинаковую ширину для всех элементов списка, кроме первого (без использования javascript) .

Ответы [ 3 ]

3 голосов
/ 27 апреля 2011

Это самый простой способ, о котором я мог подумать: 

ul { overflow: hidden; padding-left: 100px; position: relative; }
li { width: 33.33%; float: left; }
li:first-child { position: absolute; top: 0; left: 0; width: 100px; }

Основная идея заключается в том, чтобы вывести первые li из потока (position: absolute) и добавить отступ слева в ul (пробел для первого li).Теперь, если мы установим процентную ширину для других li с, они займут оставшееся пространство.

А вот демо jsFiddle .Я добавил на ul красную рамку, которая показывает, что из-за процентов li s не будет точно заполнять его.

Я не уверен, какие мобильные браузеры вы хотите поддерживать, кроме :first-child (что можно обойти, добавив класс в первый элемент списка) Я полагаю, они должны поддерживать все, что я использовал.

2 голосов
/ 27 апреля 2011

Что бы это ни стоило, я подумал об этом, когда сделал свой комментарий к вашему вопросу:

http://jsfiddle.net/4t9fV/

ul {
    display: table;
    width: 100%;
    background: #ccc;
    table-layout: fixed
}
li {
    display: table-cell;
    text-align: center;
    outline: 1px dashed red
}
li:first-child {
    width: 100px
}
2 голосов
/ 27 апреля 2011

хмм немного туповато - но, похоже, это работает, для этого требуется вложение списка (вторые 3 ссылки в отдельном списке) и промежуток для «домашней» ссылки, теория состоит в том, что вам нужна первая ссылка для float, width : 100px, тогда вам нужно, чтобы вторая группа не плавала, а переполнение скрыто, чтобы группа занимала оставшееся пространство ... затем вы перемещаете 3 ссылки @ 33% внутри неплавающего контейнера

Пример: ЗДЕСЬ

CSS: 

div {
width: 90%;
margin: 0 auto;
}

ul {
margin: 0; padding: 0; list-style: none; /* reset */
float: left;
width: 100%;
}

li {
float: left; 
width: 100%; 
text-align: center;
}

li span {
float: left; 
width: 99px; 
background: #eee; 
border-right: 1px solid #000;
}

ul ul {
float: none; 
overflow: hidden; 
width: auto;
}

li li {
width: 33%; 
background: #ffe; 
border-right: 1px solid #000;
}

HTML: 

<div>
<ul>
   <li><span>home</span>
      <ul>
         <li>about</li>
         <li>work</li>
         <li>contact</li>
      </ul>
   </li>
</ul>
</div>
...