Question

我正在尝试创建联系表单，但布局与其他布局不同。我在设计布局时遇到了问题

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

的内容

Answer 1

使用浮动左css样式的div。

<div style="float:left">FirstName</div><div style="float:left">MiddleName</div>

Answer 2

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

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

http://jsfiddle.net/XX4ju/

不寻常的HTML表单

2 个答案: