콘텐츠 당 div 너비 설정

Question

브라우저 기본 너비로 div 너비를 설정해야합니다. 이 div에는 'ul'및 'li'요소가 포함되어 있습니다. 나는 div 폭을 늘릴 필요가 있습니다. 'li'콘텐츠가 증가 할 때 브라우저가 최소화 될 때이 li 요소가 다운되지 않아야합니다 (지금 발생). 대신 브라우저가 수평 막대를 제공해야합니다. 어떤 도움이 필요합니까?

사업부 구조는 정말 당신이 원하는 무엇을 이해하지 않는,하지만 난 최선을 다할 것입니다

<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

입니다. 난 당신이 비율의 폭이

Answer 2

안녕하세요이

ul li{ 
display:inline-block; 
} 

라이브 데모 등 디스플레이 등록 정보를을 사용해야 비율

div { 
    width: 100%; 
} 

또한 다른 모든 요소에 DIV 폭을 넣을 필요가 있다고 생각 여기 http://jsfiddle.net/cL9FB/

Answer 3

jquery를 사용중인 경우에는 다음을 시도해보십시오

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

Answer 4

픽셀 단위가 아닌 모든 요소의 너비 값 (특히 <li>)을 백분율로 설정합니다. 예를 들어 인 경우 Li가 5 개인 경우 너비를 20 %로 지정하십시오. 부모의 너비가 100 %이어야합니다.

Answer 5

소리를 통해 해상도, 브라우저 크기 또는 장치에 상관없이 기본 디자인, 모양 및 내용 레이아웃을 유지하는 유동적 인 레이아웃을 원합니다. 솔직히 말해 유동적 인 레이아웃이 가장 적합하며 많은 오픈 소스 솔루션이 있습니다.

는 수행이 http://cssgrid.net/

Answer 6

div { 
    width:auto; 
} 

작업에서보세요.

Answer 7

Rohit은 가까웠지만 display: inline-block은 li이 아니라 div에 적용해야합니다. 또한 div 및 ul에있는 width: 100%은 실제로 원하는 것과 반대입니다. 벗겨.

또한 워드 랩핑을 원하지 않았습니다. 부동 소수점을 사용하여 구현할 수 있는지 여부는 확실하지 않지만 display: inline-block과 거의 동일합니다. 즉, float: left을 제거하는 것은 모든 표시 선언을 무시하기 때문입니다. 그 후에 단어 줄 바꿈을 방지하려면 white-space: nowrap을 div 또는 ul에 추가하십시오.

li의 사이에 공백이 눈에 띄는 차이를 만들 것입니다 성가신 특질 만들 않습니다 display: inline-block 사용 - 그래서 당신은 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은 100 %`: http://jsfiddle.net/gncGX/2/