CSS : div의 내용을 줄 바꿈하지 마십시오

Question

두 개의 버튼이있는 고정 폭 div가 있습니다. 단추의 레이블이 너무 길면 줄 바꿈됩니다 - 한 단추는 첫 번째 줄에 머물러 있으며, 다음 단추는 옆에있는 대신에 그 아래에옵니다.

두 단추가 한 줄에 있도록 div를 확장하려면 어떻게해야합니까? 당신의 사업부는 확장하지 말아야 고정 너비가있는 경우 그 폭을 고정했기 때문에

Answer 1

는 white-space:nowrap;

Answer 2

을보십시오. 그러나 최신 브라우저는 min-width CSS 속성을 지원합니다.

CSS 표현식을 사용하거나 자동 너비를 사용하고 컨테이너에 스페이서 개체를 사용하여 이전 IE 브라우저에서 min-width 속성을 에뮬레이트 할 수 있습니다. 당신이 할 수있는, 당신이 정말로 사업부와의 최소 폭에 대해 걱정하지 않는 경우

<div id="container" style="float: left"> 
    <div id="spacer" style="height: 1px; width: 300px"></div> 
    <button>Button 1 text</button> 
    <button>Button 2 text</button> 
</div> 

Answer 3

단지 사업부가 전체 컨테이너에 걸쳐 확장하고 싶지 않은 :이 솔루션은 우아한 아니라 트릭을 할 수 있습니다 그것은 왼쪽 부동 - 기본적으로 떠있는 div 그래서 같은 내용을 지원하기 위해 확장 : 두 float: left;white-space: nowrap;의 조합은 나를 위해 일한

<form> 
    <div style="float: left; background-color: blue"> 
     <input type="button" name="blah" value="lots and lots of characters"/> 
     <input type="button" name="blah2" value="some characters"/> 
    </div> 
</form> 

Answer 4

합니다.

각각은 독립적으로 원하는 결과를 얻지 못했습니다.

Answer 5

버튼을 똑같은 선에두면 고정 된 너비의 div가됩니다. 괜찮 으면 이미 div 안에 다른 div를 만들 수 있습니다. 새로운 div는 버튼을 누르고 두 개의 버튼이 한 줄에 머무를 필요가있는 많은 공간의 고정 폭을 갖습니다. 당신은 parentDiv 경계의 외부 컨텐츠의 덩어리에 대한 overflow 속성을 고려할 수 있습니다

<div id="parentDiv" style="width: [less-than-what-buttons-need]px;"> 
    <div id="holdsButtons" style="width: [>=-than-buttons-need]px;"> 
     <button id="button1">1</button> 
     <button id="button2">2</button> 
    </div> 
</div> 

: 여기

은 예입니다.

행운을 빈다.

Answer 6

이유는 모르겠지만 상위 컨테이너를 display:flex으로 설정하고 하위 컨테이너를 display:inline-block으로 설정하고 부모를 초과하는 하위의 결합 된 너비에도 불구하고 인라인 상태를 유지했습니다.

장난감은 최대 너비, 최대 높이, 공백 또는 다른 것을 필요로하지 않았습니다.

누군가를 돕는 희망.