Блог

Хорошо, я скопировал jsfiddle другого пользователя, извините, потерял имя пользователя :-/

Теперь я создал именно то, что я хочу, а именно гибкие неупорядоченные списки, которые являются адаптивными. Раньше это были divs, но это множественные ul.

Вот так, эти списки в основном заполнят страницу http://jsfiddle.net/pMF2m/21 /

Но есть одна маленькая вещь, о которой я хочу спросить. Я знаю, что могу использовать предоставленные точки отсечения для поддержания хорошего стиля при разных размерах, но если я зафиксировал ul в заданном пространстве, то почему я могу найти точку при сжатии окна просмотра, где выпадает последний список?

Не должны ли ul становиться все тоньше и тоньше, пока мы не достигнем небольшого размера, определенного в css? Разве это не должно быть невозможно, чтобы это произошло?

Любой совет был бы оценен. Опять же, я знаю, что могу и сделаю несколько мультимедийных запросов, чтобы избежать этого, но как это вообще может произойти?

Вот код:

 <div class="outer">
    <ul class="inner1">
    <li>Hello World I wonder what they will think</li>
    <li>World</li>
    <li>!</li>
    </ul>
        <ul class="inner2">
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
    </ul>
        <ul class="inner3">
    <li>Hello</li>
    <li>World</li>
    <li>!</li>
    </ul>
</div>

body {
    margin:0;
    border: none;
}
ul,li { padding:2px; list-style:none; }

.outer {
    width: 100%;
}

.outer li {   white-space: nowrap;
  overflow: hidden;
    text-overflow: ellipsis;}

.inner1 {
    clear: both;
    float: left;
    margin-left:7%;
    display:inline-block;
    width: 30%;
}
.inner2 {
    display:inline-block;
    width: 30%;

}
.inner3 {
    display:inline-block;
    width: 30%;
}
 @media only screen and (max-width: 420px) {

    .inner1, .inner2, .inner3 {
        display:block;
        width:100%;
        margin-left:0;

    }
}
  

Когда вы работаете со встроенными элементами (включая элементы встроенного блока), когда вы пишете их следующим образом:

 <ul>
   <li>...</li>
   <li>...</li>
</ul>
<ul>
   <li>...</li>
   <li>...</li>
</ul>
  

каждая новая строка добавляется как пробел между встроенными элементами.

Это означает, что это то же самое, если у вас есть слово, разделенное пробелом.

Итак, у вас есть word word word , эти пробелы не учитываются и нарушают ваш адаптивный дизайн.

Итак, что делать?

1) Это ПЛОХОЙ способ: Вы можете написать их следующим образом:

 <ul><li>....</li><li>....</li></ul><ul><li>....</li><li>....</li></ul>
  

2) ХОРОШИЙ способ

Вы добавляете font-size: 0 к родительскому элементу ul -s и добавляете некоторые font-size к ul -s, которые не равны нулю.

Таким образом, пробелы больше не будут занимать пробелов, поскольку у них есть font-size: 0 , но мы также должны добавить некоторый размер шрифта к ul -s, поскольку они тоже исчезнут, а мы хотим удалить только пробелы.

 .outer {
    font-size: 0;
}
ul { font-size: 14px; }
  

ДЕМОНСТРАЦИЯ

Есть другие способы сделать это с отрицательным отображением, но 2) — самый чистый способ.