Question

我搜索过，this帖子最接近，但不完全相同。我试图让两个跨度彼此相邻，具有百分比宽度。但是，当窗口的宽度因用户的屏幕大小或窗口大小而减小时，标签和输入字段将单独分开。我希望标签和输入是一个单位，这样如果窗口减少，第二个跨度将包裹在第一个下方。

HTML：

<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>

CSS：

#startdate {
    width: 30%;
    display: inline-block;
}
#enddate {
    width: 30%;
    display: inline-block;
}

Here is a fiddle。如果要测试调整大小功能，请将中心栏移到右侧。

Answer 1

修正：http://jsfiddle.net/XceSq/1/

<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>

span元素是一个文本容器，不支持您希望实现的宽度要求。但是，div元素是一个布局容器，它允许您在单个块中包含两个对象。使用display:inline-block，我们可以确保两个容器并排显示。

享受并祝你好运！

换行或挂起缩进辅助跨度

1 个答案: