Установите ширину div согласно контенту

Question

Мне нужно установить ширину div как ширину по умолчанию браузера. Этот div содержит элементы 'ul' и 'li'. Мне нужно увеличить ширину div. Когда содержимое «li» увеличивается, а также, когда браузер сведен к минимуму, эти элементы li не должны опускаться (теперь происходит), а браузер должен обеспечивать горизонтальную панель. Любая помощь?

Div структура

<div style="position:relative;border:1px solid red; line-height:16px;width:100%"> 
    <ul style="position:relative;background:green;height:30px; width:100%;list-style:none; margin:0;"> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 
     <li style="position:relative; display:inline-block; padding-left:20px; float:left; background:red" >Welcome</li> 

    </ul> 

</div> 

Answer 1

Я не очень понимаю, что вы хотите сделать, но я буду стараться изо всех сил. Я думаю, вам нужно поставить Диву ширину в процентах

div { 
    width: 100%; 
} 

И весь ваш другой элемент также должен иметь ширину в процентах

Answer 2

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

ul li{ 
display:inline-block; 
} 

Live Demo здесь http://jsfiddle.net/cL9FB/

Answer 3

В случае, если вы используете jquery, тогда вы можете попробовать это

$(document).ready(function(){ 
    $("#divId").css("width", $(window).width()+"px"); 
}); 

Answer 4

Установить значение ширины всех элементов (в частности <li>) в процентах, не в пикселях; для бывших, если у вас 5 ли, дайте им ширину: 20%. их родитель, ширина s должна быть 100%

Answer 5

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

Посмотрите на этот http://cssgrid.net/

Answer 6

div { 
    width:auto; 
} 

работу.

Answer 7

Rohit был закрыт, но display: inline-block необходимо применять к div, а не к li. Кроме того, width: 100% на ваших div и ul на самом деле будет делать противоположное тому, что вы хотите; сними.

Кроме того, вы не нуждались в переносе слов - я не уверен, можно ли достичь с помощью поплавков, но это возможно с display: inline-block, что делает почти то же самое. Это означает удаление float: left, потому что это переопределит любое объявление отображения. После этого просто добавьте white-space: nowrap в div или ul, чтобы предотвратить перенос слов.

Использование display: inline-block действительно создает раздражающий причуда, что любой пробел между li с создаст видимый разрыв - так что вы не можете поместить любой пробел между li с, даже перевода строки. Мне нравится иметь дело с этим, переместив знак > перед началом < знак следующего тега - это решает проблему, так как пробелы между > и < подсчитываются.

Обновленный код:

<div style="position:relative; border:1px solid red; line-height:16px; display:inline-block"> 
    <ul style="position:relative; background:green; height:30px; list-style:none; margin:0; white-space: nowrap" 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
     ><li style="position:relative; padding-left:20px; display:inline-block; background:red" >Welcome</li 
    ></ul> 
</div> 

jsFiddle: http://jsfiddle.net/gncGX/2/