디브의 내용물을 포장하지 않는 방법?

디브의 내용물을 포장하지 않는 방법?

나는 고정 폭을 가지고 있습니다.div단추가 두 개 달린단추의 레이블이 너무 길면 단추가 감깁니다. 하나의 단추는 첫 번째 줄에 있고 다음 단추는 그 옆이 아니라 그 아래에 따라갑니다.

어떻게 하면 강제로div두 개의 버튼이 한 줄 위에 있도록 확장할 수 있습니까?

해라white-space: nowrap;

문서: https://developer.mozilla.org/docs/Web/CSS/white-space

둘다 합쳐진것float: left; white-space: nowrap;나를 위해 일했습니다.

그들은 각자 원하는 결과를 얻지 못했습니다.

이유는 모르겠지만, 저는 부모 컨테이너를 로, 아이 컨테이너를 로 설정했고 아이들은 부모를 초과하는 아이들의 폭을 모두 합해도 줄을 섰습니다.

장난칠 필요가 없었습니다.max-width,max-height,white-space, 아니면 다른 어떤 것이든.

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

디브의 최소 너비를 신경 쓰지 않고 디브를 컨테이너 전체로 확장하고 싶지 않다면 왼쪽으로 띄울 수 있습니다. 기본적으로 띄운 디브를 확장하여 콘텐츠를 지원할 수 있습니다.

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

디바의 폭이 고정되어 있다면, 디바의 폭을 고정시켰기 때문에 확장해서는 안 됩니다.하지만, 현대 브라우저들은 a를 지원합니다.min-widthCSS 속성.

CSS 식을 사용하거나 auto width를 사용하고 컨테이너에 스페이서 객체를 가지고 있으면 이전 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>

버튼을 강제로 동일한 줄에 유지하면 해당 버튼이 있는 디브의 고정 폭을 초과하게 됩니다.괜찮으시다면 이미 가지고 있는 디브 안에 디브를 하나 더 만들어도 됩니다.새 디바인은 차례로 버튼을 잡고 두 개의 버튼이 한 줄에 있어야 하는 공간의 폭을 고정할 것입니다.

다음은 예입니다.

<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경계.

행운을 빕니다.

언급URL : https://stackoverflow.com/questions/1703183/how-to-not-wrap-contents-of-a-div