将按钮宽度设置为父div的100%，不带换行符

Question

我有一个名为text的div，在它旁边我想要一个按钮，它应该占据屏幕的剩余宽度，所以我将按钮的宽度设置为100%，但它将占屏幕的100%，并显示在文本div下面。我如何使它使按钮的宽度为其父div的100%，而不是整个屏幕的宽度，这样它就都显示在同一行上，而不设置文本div的宽度？这是一个演示。非常感谢。

css

#text{
      float:left;  
}
div{
    border:1px solid red;    
}
button{
       width:100%;   
}

html

<div id = "text">text</div>
<div>
   <button>button</button>
</div>

Answer 1

您应该能够使用display: table-cell css实现这一点：

试试这样的东西：DEMO

<div class="container">
    <div class="cell" id="text">text</div>
    <div class="cell">
        <button>button</button>
    </div>
</div>
div.container {
    width: 100%;
    display: table;
}
div.cell {
    border:1px solid red;  
    display: table-cell;
}
button {
    width:100%;   
}
/* use this style to set width of the #text cell to exactly the width of it's cotnents */
#text {
    width:1%;
    white-space: nowrap;
}

Answer 2

您可以将它们放在一个div中，并将它们显示为flex。

http://jsfiddle.net/1amvwzuw/2/

<div class="flex">
    <div id="text">text</div>
    <button>button</button>
</div>

Answer 3

您需要给父容器一个宽度。所以文本可以是80%，那么包含button的div可以是20%。那么按钮将是父div的100%，并且两个div将在一起。

Answer 4

所以div元素是块元素。这意味着它将从一条新行开始，之后的下一个元素也将在一条新行上。这里可以做的是将display: inline-block设置为您拥有的两个divs。

如果您不需要块元素，只需使用像span 这样的内联元素

http://jsfiddle.net/1amvwzuw/3/

Answer 5

如果您的浏览器矩阵允许，这是试用flexbox:的最佳机会

html

<div class="wrapper">
    <div id="text">text</div>
    <div class="button-wrapper"><button>button</button></div>
</div>

css

.wrapper{
    display: flex;
}
.button-wrapper{
    flex: 1;  
}
button {
    width: 100%;
}

http://jsfiddle.net/1amvwzuw/5/

如果不考虑这个问题，看看如何使用display:table-cell拉伸div：自动拉伸表格单元格div css