1

I have searched, and this post is closest, but not exactly the same. I am trying to have two spans next to each other, with percentage widths. However, when the window's width is decreased by the user's screen size or window resizing, the labels and input fields separate individually. I would like the label and input to be one unit, so that if the window is decreased, the second span will wrap below the first.

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. If you want to test the resizing functionality, move the center bar to the right.

4

1 回答 1

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，我们能够确保两个容器并排显示。

享受和好运！

于 2012-07-11T16:39:38.943 回答