CSS: Do not wrap contents of div

2019-01-30 03:22发布

I've got a fixed-width div with two buttons in it. If the labels of the buttons are too long, they wrap--one button stays on the first line, and the next button follows underneath it instead of adjacent to it.

How can I force the div to expand so that both buttons are on one line?

6条回答
霸刀☆藐视天下
2楼-- · 2019-01-30 03:54

Try white-space:nowrap;

查看更多
时光不老,我们不散
3楼-- · 2019-01-30 03:57

If you don't care about a minimum width for the div and really just don't want the div to expand across the whole container, you can float it left -- floated divs by default expand to support their contents, like so:

<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>
查看更多
神经病院院长
4楼-- · 2019-01-30 03:59

A combination of both float: left; white-space: nowrap; worked for me.

Each of them independently didn't accomplish the desired result.

查看更多
叼着烟拽天下
5楼-- · 2019-01-30 03:59

I don't know the reasoning behind this, but I set my parent container to display:flex and the child containers to display:inline-block and the stayed inline despite the combined width of the children exceeding the parent.

Didn't need to toy with max-width, max-height, white-space, or anything else.

Hope that helps someone.

查看更多
Viruses.
6楼-- · 2019-01-30 04:05

Forcing the buttons stay in the same line will make them go beyond the fixed width of the div they are in. If you are okay with that then you can make another div inside the div you already have. The new div in turn will hold the buttons and have the fixed width of however much space the two buttons need to stay in one line.

Here is an example:

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

You may want to consider overflow property for the chunk of the content outside of the parentDiv border.

Good luck!

查看更多
时光不老,我们不散
7楼-- · 2019-01-30 04:16

If your div has a fixed-width it shouldn't expand, because you've fixed its width. However, modern browsers support a min-width CSS property.

You can emulate the min-width property in old IE browsers by using CSS expressions or by using auto width and having a spacer object in the container. This solution isn't elegant but may do the trick:

<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>
查看更多
登录 后发表回答