Блог

Главная - Вопросы по программированию - CSS — иметь дочерние элементы, соответствующие родительским, и иметь их содержимое в виде минимальной ширины

CSS — иметь дочерние элементы, соответствующие родительским, и иметь их содержимое в виде минимальной ширины

#html #css

#HTML #css

Вопрос:

 <ul style="width:100%;height:50px;">
    <li>foo</li>
    <li>bar foo</li>
    <li>bar bar bar bar bar barbarbar</li>
</ul>

Я хочу, чтобы мой li был выровнен по горизонтали, чтобы заполнить ul по ширине, чтобы их текст был минимальной ширины, и если они слишком велики по горизонтали, чтобы контейнер переполнялся (не переходил в строку).

Есть решение?

Комментарии:

1. В этих случаях вам следует нанять разработчика, как будто никто не должен работать «бесплатно». Предоставьте нам больше кода или, по крайней мере, JSFiddle, чтобы получить помощь.

Ответ №1:

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

 ul{background:#dddddd;}

ul li{
   float:left;
   list-style:square inside;
   padding-right:20px;
   line-height:50px;
}

Вот вывод.

Комментарии:

1. работает помимо того факта, что чрезмерно длинные <li> переходят в строку вместо того, чтобы оставаться в одной строке и выходить за пределы ul (и окна)

Ответ №2:

Demo

вы можете использовать flexbox

css

 ul {
    display: flex;
    line-height: 50px;
    border: 1px solid red;
    flex-wrap: nowrap;
    flex-direction: row;
    /*justify-content: center; if you want to justify flex elements*/
}
li {
    min-width: 100px;
    white-space: nowrap;    
}
body {
    margin:0;
    padding: 0;
}

РЕДАКТИРОВАТЬ: min-width для содержимого li New Demo

Подробнее о flexbox

Комментарии:

1. вы устанавливаете минимальную ширину: 100 пикселей, я хочу, чтобы минимальная ширина была содержимым каждого li

2. Я добавил новую демонстрацию.

3. Лучше, но теперь давайте перейдем друг к другу, когда они слишком велики для ul, в то время как я хочу, чтобы они оставались рядом и переполнялись справа от ul, возможно, это можно сделать только в JS

4. для этого вам нужно указать ширину li