0

编辑：澄清一下，我希望所有 4 个元素都在一行中，适合 100%。我知道我可以更改 % 但我希望它们与 div 的边缘齐平

我正在尝试使我的标签和输入字段适合单行，并在需要时基于 % 调整大小。

问题是，我无法让它们都排成一行 - 我认为这与某处的填充或边距有关，但无法弄清楚。

我在这里做了一个 JSfiddle http://jsfiddle.net/ZxRAu/

这是相关的CSS

.generalcontainer {
    width:65%;
    margin:5%;
    height:600px;
    float:left;
    background-color: #CCCCCC;
    border: 0px;
}
.generalcontainer > span {
    font-family: Calibri;
    font-size: 14px;
    padding: 4px;
    margin: 0px;

.generalcontainer > span.label {
    color: #000000;
    font-weight: normal;
    display: inline-block;
    width:25%;
}
.smallentryfield {
    color: #000000;
    font-weight: bold;
    width: 25%;
    padding: 4px;
    margin: 0px;
}
select.smallentryfield {
   box-sizing: content-box;
 }
4

3 回答 3

0

25% 没有完全按照您的预期工作的原因可能有很多。原因之一是，您有一个元素的宽度设置为百分位数，但填充以像素为单位。另一个原因可能是输入元素忽略了应用在它们上的宽度，因为它们的边框、边距和填充。虽然您可以将所有这些设置为 0，但当您将显示设置为 inline-block 时，您仍然会面临一些挑战，因为这会在元素底部添加一些空间，从而在元素之后显示不可见的边距当然，除非您使用设置为顶部的垂直对齐和字体大小或行高的某种组合。

一种可能的解决方案是为每个表单元素设置一个容器元素，并将容器的宽度设置为 25%，并将其设置为 display:block 和 float:left。然后您可以将内部元素的宽度设置为 100% 并删除它们的填充和边距。

例如：

<div class="container">
    <label>First name</label>
</div>
<div class="container">
    <select>
        <option selected="selected" value="Mr">Mr</option>
        <option value="Mrs">Mrs</option>
    </select> 
</div>
<div class="container">
    <span>First name</span>
</div>
<div class="container">
    <input type="text"></input>
</div>

我称它为“容器”只是一个例子。您可以将其更改为任何内容。您可以为容器设置 CSS，如下所示：

div.container {
    color: #000000;
    font-weight: normal;
    display: block;  /*you need this only if you use a span (as per your example)*/
    width:25%;
    float: left;
    padding: 0px;
    margin: 0px;
}

最后，对于内部元素的 CSS，您可以执行以下操作：

div.container input[type=text], div.container select {
    width: 100%;
    padding: 0px;
    margin: 0px;
    border: 0px;
}

这只是关于您可以采取什么方向来解决此问题的建议。这里是一个 jsfiddle，开始在您的特定场景中使用这个概念：http: //jsfiddle.net/f8dUC/3/

希望有帮助！

于 2013-10-19T04:24:19.680 回答
0

重新开始并使用 Walmiks 指导数据中的容器。还设置基于 % 的填充以使其完美。

IE

form {
    width:98%;
    line-height:24px;
    padding: 1% 1% 0 1%;
}

查看下面的 JSfiddle

http://jsfiddle.net/FYdhz/

于 2013-10-19T09:45:30.260 回答
0

我想，它只需要一个<br>标签，看看这个例子：

http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/1/

或者如果你想要这个：

http://jsfiddle.net/afzaal_ahmad_zeeshan/ZxRAu/2/

我只是减少width到20%. 它有效:)

有边距和填充，这是导致问题的原因。因此，四个元素的 25% 将是 100%，其余边距。这样，该行被打破并形成了 2 行。

因此，添加 20% 可以解决问题。你可以看看小提琴。

于 2013-10-19T03:34:05.373 回答