Como não quebrar o conteúdo de uma div?

243

Eu tenho uma largura fixa divcom dois botões. Se os rótulos dos botões forem muito longos, eles se quebram - um botão permanece na primeira linha e o próximo botão segue embaixo dele, em vez de ficar adjacente a ele.

Como forçar a divexpansão para que os dois botões estejam em uma linha?

html css

— JamesBrownIsDead
fonte

Eu não consigo nem entrar com meu OpenID para doctype, então acho que a pergunta melhor pertence aqui.

— 9139 Stefan Kendall

3

@ nicolaides Concordo que funcionaria no doctype, mas acho que é totalmente legítimo no SO também.

— TM.

454

Tente white-space: nowrap;. . .

— Marek Karbarz
fonte

6

FYI: De acordo com os documentos da MDNwhite-space , o nowrapvalor é suportado no IE 6+, embora outros valores sejam apenas o IE 8+

— Walter Roman

73

Uma combinação dos dois float: left; white-space: nowrap;funcionou para mim.

Cada um deles independentemente não alcançou o resultado desejado.

— Chris Nolet
fonte

6

Não sei o raciocínio por trás disso, mas configurei meu contêiner pai display:flexe o contêiner filho display:inline-blocke eles permaneceram alinhados, apesar da largura combinada dos filhos exceder o pai.

Não tinha necessidade de brincar com max-width, max-height, white-spaceou qualquer outra coisa.

Espero que ajude alguém.

— elPastor
fonte

1

Isso funcionou para mim quando outras abordagens listadas acima não funcionaram. Tudo que eu precisava era display: flex. Não precisava de mais nada.

— precisa

4

Se você não se importa com uma largura mínima para a div e realmente não quer que a div se expanda por todo o contêiner, você pode flutuar para a esquerda - divs flutuadas por padrão expandem para oferecer suporte ao conteúdo, da seguinte forma:

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

— Nicholas Becker
fonte

0

Se sua div tiver uma largura fixa, ela não deverá se expandir, porque você a fixou. No entanto, navegadores modernos oferecem suporte a uma min-widthpropriedade CSS.

Você pode emular a propriedade min-width em navegadores antigos do IE usando expressões CSS ou largura automática e tendo um objeto espaçador no contêiner. Esta solução não é elegante, mas pode fazer o truque:

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

— Sr. Brilhante e Novo 安宇
fonte

-2

Forçar os botões a permanecerem na mesma linha fará com que eles ultrapassem a largura fixa da div em que estão. Se você concorda com isso, pode criar outra div dentro da div que você já possui. A nova div, por sua vez, manterá os botões e terá a largura fixa de quanto espaço os dois botões precisarem para permanecer em uma linha.

Aqui está um exemplo:

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

Você pode considerar a propriedade overflow para a parte do conteúdo fora da parentDivborda.

Boa sorte!

— Zoid
fonte