Question

我有一个类似于此小提琴的HTML结构：http://jsfiddle.net/hAMmK/3/

HTML结构：

<span class="all">
     <span class="group-1">
         <span class="a">A</span>
         <span class="b"><input type="text" placeholder="b" /></span>
     </span>
     <span class="group-2">
         <span class="c">C</span>
         <span class="d">D</span>
     </span>  </span>

css的当前结果是

first result

但我想要的结果是

Desired result

这个结果应该是响应的，我的意思是，输入文本的宽度应该是设备/浏览器的正确当前宽度的最大值。此外，我需要与最常见的浏览器兼容（如移动设备/平板电脑等桌面）。

解决这个问题的最佳方法是什么？

Answer 1

使用CSS3 Calc： Running Demo

input[type="text"]{        
    width: calc(100% - 100px);
}

但是，

Not (yet) supported everywhere，你需要知道要减去的宽度。

Answer 2

如果您的按钮是静态的，即您知道左/右跨度的宽度/数量，那么您可以使用浮点数。它提供了更平滑的响应感觉，但使用了有时不太好的负边距。

我将CSS更改为：

.group-1 {
    width: 20px;
    float: left;
    margin-top: 6px;
}
.group-2 {
    margin-left: 30px;
    margin-right: 70px;
}
.group-3 {
    width: 60px;
    float: right;
    margin-top: -20px;
}

看看： http://jsfiddle.net/hAMmK/16/

就像我说的那样，只有你可以修复你的左/右宽度，但它似乎能提供干净的响应感觉。

Answer 3

更改宽度以使用百分比。

.a {
     padding: 3px 7px;
    background-color: LightBlue;
    border: 2px solid CornflowerBlue;
    border-radius: 5px;
    color: SteelBlue;
    width: 10%;
}
.c {
    padding: 3px 7px;
    background-color: Moccasin;
    border: 2px solid BurlyWood;
    border-radius: 5px;
    color: DarkKhaki;
    width: 10%;
}
.d {
    padding: 3px 7px;
    background-color: LightSalmon;
    border: 2px solid Brown;
    border-radius: 5px;
    color: IndianRed;
    width: 10%;
}
input{
    width: 70%;
}

JS小提琴： http://jsfiddle.net/hAMmK/4/

Answer 4

作为css3样式calc的替代方案，如果你需要支持其他浏览器，这是另一种解决方案。

如果A是标签而C和D是按钮（我猜），你可以在输入字段中使用宽度100％并将其向左浮动，然后你必须显示阻止其父级（如果它是一个跨度为在这种情况下）并添加一个边距 - 右边的sime大小比你的按钮。边距将会崩溃，因为内容已浮动，按钮将显示在输入字段的右侧。

如果你知道它的大小，你可以对标签做同样的事情，或者你可以更好地使用表来改变标签文本（可能用于国际化）。

您可以看到它应用于您的示例：

http://jsfiddle.net/cTd2e/

/*Styles for position here*/
.all{
    line-height: 22px;
}
table {
    width: 100%;
    float: left;
}
.second-cell input{
    width: 100%;
    float: left;
}
.b {
    display: block;
    margin-right: 130px;
}
td.first-cell {
    white-space: nowrap;
}
td.second-cell {
    width: 100%;
}
.group-2{
    vertical-align: middle;
    margin-left: 10px;
}

此外，如果按钮包含文本，那么您可以使用表格中的表格使输入字段为100％，其余字段为自动。

我不知道是否有更现代的兼容方式，这将是伟大的！

输入应具有可能的最大宽度

4 个答案: