0

我有 2 个并排的 div。

在第一个 div 中，我有 2 个并排的标签，下面有一个输入文本。其中一个标签是错误信息。有时会显示，有时不显示。当它不显示时，我希望将 div 调整为更小，这样第二个 div 可以更接近它。

第二件事是一样的，除了它有一个标签 div，因此它不需要调整大小。

有没有办法实现我想要的？下面是我想要实现的一个非常棒的示例：

自动调整宽度的惊人绘制示例

这是代码。

<div id="main-div">
<div id="address-number-div">
    <label>Number</label>
    <label class="error" id="number-error">Empty Field</label>
    <input id="number-input" onfocus="onfocus('number-error')"/>
</div> 

<div id="address-complement-div">
    <label>Complement</label>
    <input id="complement-input" />
</div>

​</p>

和 CSS：

div {border: 1px solid #000000; padding: 5px;}

.error{color:#FF0000; margin-left:5px;}

#main-div div {display:inline-block;}

#main-div input {display:block;}

#number-input {
    width: 16%;
}​
4

3 回答 3

2

将它们设置display: inline-block;为让它们缩小以适应内容。

于 2012-09-13T13:40:55.663 回答
2

看看这个演示。

向左浮动你的 div 应该可以解决这个问题。

于 2012-09-13T13:50:06.483 回答
1

不要给width <persentage>类型值，给<length>：

#number-input { width: 24px; }​

用我的 fiddle上的代码查看它。

于 2012-09-13T15:42:28.353 回答