0

我有一个看起来像这个 jsfiddle的页面，代码如下：

html:
<div class="parent">
  <div class="child">
    <input type="text">
    <input type="submit">
  </div>
</div>

css:
.parent { width: 500px; }
.child { width: 100%; }

我如何得到它，以便它们一起占据父 div 宽度的 100%（文本输入相应地拉伸）？

澄清一下：我希望一行中的按钮是固定宽度，输入占用父级的剩余宽度，这样宽度就等于父级宽度。如果行中没有按钮，我希望 textinput 占据整个宽度。

4

3 回答 3

0 
.parent { width: 500px; margin:auto; }
.child { width: 100%; }

add this to make input stretches to full width

.child input { width: 100%; }
于 2013-06-30T03:40:57.560 回答
0

There are many ways to do this. One way to do this is to use the display:table-x attribute.

If you wrap the input elements in a div of their own like so:

<div class="parent">
    <div class="text">
        <input type="text" />
    </div>
    <div class="button">
        <input type="submit" />
    </div>
</div>

Then style the parent as display:table, the wrapper div's as display:table-cell, and give a width to div.button, like so:

.parent {
    width: 500px;
    background-color:blue;
    display:table;
}
.text {
    display:table-cell;
}
.text input {
    width:100%;
    -webkit-appearance:none;
}
.button {
    display:table-cell;
    background-color:red;
    width:100px;
}

Then you can achieve the result you are looking for: http://jsfiddle.net/QpCCD/9/

于 2013-06-30T03:47:49.633 回答
0

这类似于@panindra 的帖子，但它将两个输入保持在同一行。我为示例添加了一些颜色，以便能够看到屏幕上的位置。

<html>
<head>
<style type="text/css">
    body { background-color: black; }
    .parent { width: 500px; background-color: white; text-align: center; }
    .child { width: 100%; position: relative; margin: 0px 0px 0px 0px; border: 0px; }
    .child input { width: 49%; margin: 0px 0px 0px 0px; border: 0px; }
</style>
</head>
<body>
<div class="parent">
  <div class="child">
    <input type="text">
    <input type="submit">
  </div>
</div>
</body>
</html>

实际上，这会更接近：

.child input { width: 248px; }
于 2013-06-30T04:16:02.287 回答