0

我正在尝试创建一个联系表单，但布局不像任何其他布局。我在设计布局时遇到问题

contact form

Contact Name
[......]     [........]      [..........]
firstname    middlename       Lastname

Phone
[.......]            [.......]
 areacode               phone

 <form>
    <div class="form-all">
        <div class="form-all">
    <ul class="form-section">
      <li class="form-line" id="id_69">
        <label class="form-label-top" id="label_69" for="input_69">
          CONTACT NAME<span class="form-required">*</span>
        </label>
        <div id="cid_69" class="form-input-wide">
        <span class="form-sub-label-container">
        <input class="form-textbox validate[required]" type="text" size="10" name="q69_contactName69[first]" id="first_69">
            <label class="form-sub-label" for="first_69" id="sublabel_first"> First Name </label></span><span class="form-sub-label-container"><input class="form-textbox" type="text" size="10" name="q69_contactName69[middle]" id="middle_69">
            <label class="form-sub-label" for="middle_69" id="sublabel_middle"> Middle Name </label></span><span class="form-sub-label-container"><input class="form-textbox validate[required]" type="text" size="15" name="q69_contactName69[last]" id="last_69">
            <label class="form-sub-label" for="last_69" id="sublabel_last"> Last Name/Surname </label></span>
        </div>
      </li>

类似于http://www.esvalmodels.com/order_form_jotform.html

4

2 回答 2

1

使用具有浮动左 css 样式的 div。

<div style="float:left">FirstName</div><div style="float:left">MiddleName</div>
于 2013-07-03T04:56:57.880 回答
0

正如 TGH 建议的那样，您应该使用float:left;. 在span元素上添加display:block;以使其工作。

.form-sub-label-container {
    display:"block";
    float:left;
}

http://jsfiddle.net/XX4ju/

于 2013-07-03T05:49:27.380 回答