div의 내용을 래핑하지 않는 방법은 무엇입니까? 가 있습니다. 단추

div두 개의 버튼 이있는 고정 너비 가 있습니다. 단추 레이블이 너무 길면 줄 바꿈 – 한 단추는 첫 번째 줄에 머물고 다음 단추는 그 옆에있는 것이 아니라 그 아래에옵니다.

div두 버튼이 모두 한 줄에 있도록 펼치 려면 어떻게 해야합니까?

답변

시도하십시오 white-space: nowrap;. . .

답변

둘의 조합이 float: left; white-space: nowrap;나를 위해 일했습니다.

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

답변

나는 이것에 대한 추론을 모르지만 부모 컨테이너 display:flex와 자식 컨테이너를 설정하고 부모의 display:inline-block너비를 초과하는 어린이의 너비에도 불구하고 인라인 상태를 유지했습니다.

장난감 필요가 없었다 max-width, max-height, white-space다른 사람, 또는 아무것도.

누군가에게 도움이되기를 바랍니다.

답변

div의 최소 너비를 신경 쓰지 않고 실제로 전체 컨테이너에서 div를 확장하지 않으려면 왼쪽으로 플로팅 할 수 있습니다. 기본적으로 플로팅 된 div는 다음과 같이 내용을 지원하도록 확장됩니다.

<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>

답변

div의 너비가 고정되어 있으면 너비가 고정되어 확장되지 않아야합니다. 그러나 최신 브라우저는 min-widthCSS 속성을 지원 합니다.

CSS 표현식을 사용하거나 자동 너비를 사용하고 컨테이너에 spacer 객체를 사용하여 이전 IE 브라우저에서 최소 너비 속성을 에뮬레이션 할 수 있습니다. 이 솔루션은 우아하지는 않지만 트릭을 수행 할 수 있습니다.

<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>

답변

버튼을 같은 줄에 유지하면 버튼이있는 div의 고정 너비를 초과하게됩니다. 괜찮다면 이미 가지고있는 div 안에 다른 div를 만들 수 있습니다. 새로운 div는 버튼을 유지하고 두 버튼이 한 줄에 머무르는 데 필요한 공간의 고정 폭을 갖습니다.

예를 들면 다음과 같습니다.

<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>

경계 외부의 내용 청크에 대한 오버플로 속성 을 고려할 수 있습니다 parentDiv.

행운을 빕니다!

답변