3

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

HTML结构：

<span class="全部">
     <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的当前结果是

第一个结果

但我想要的结果是

期望的结果

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

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

4

4 回答 4

3

使用CSS3 计算：Running Demo

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

但是，还没有（还）支持所有地方，您需要知道要减去的宽度。

于 2013-09-19T09:55:52.033 回答
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/

就像我说的那样，它只有在您可以修复左/右宽度但似乎给人一种干净的响应感觉时才会起作用。

于 2013-09-19T10:05:39.747 回答
1

更改宽度以使用百分比。

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

于 2013-09-19T09:47:56.547 回答
1

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

如果 A 是标签，C 和 D 是按钮（我猜），您可以在输入字段中使用 100% 宽度并将其向左浮动，那么您必须显示块其父级（如果它是跨度，在这种情况下) 并添加一个与按钮大小相同的边距。边距将折叠，因为内容是浮动的，并且按钮将出现在输入字段的右侧。

然后，如果您知道标签的大小，则可以对标签执行相同的操作，或者您可以更好地使用表格来更改标签文本（可能是为了国际化）。

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

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% 和其余部分自动。

我不知道是否有更现代的兼容方式来做到这一点，那就太好了！

于 2013-09-19T13:40:16.193 回答