0

我一直在为公司网站制作一个新页面，并成功地按照指定的方式设计了表单。该表单在除 IE7 之外的所有浏览器中都能正确显示，但尽管使用不同的关键字多次搜索 StackOverflow 和 Google，但我无法找到任何类似的问题或解决方案。

我试图在 jsfiddle 中复制该行为，但没有运气。相反，我将附上前后行为的两个屏幕截图，以及相关代码的片段。

在此处输入图像描述

第一张图片显示了表单的外观，这就是浏览器首次加载页面时的显示方式。但是，表单行为有些不稳定，以下更改会在用户开始在输入框中输入或单击提交时生效，这似乎是随机的。

在此处输入图像描述

这是我正在使用的 HTML 代码，没什么特别的：

<form id="enquiry" action="/guides/thanks" method="post">
<div>
<ul>
    <li>
        <label for="firstname">First name*:</label>
        <input id="firstname" type="text" name="firstname" size="40" value="{{firstname | escape }}" {{ is_missing("firstname") }} />
    </li>
    <li>
        <label for="lastname">Last name*:</label>
        <input id="lastname" type="text" name="lastname" size="40" value="{{lastname | escape }}" {{ is_missing("lastname") }} />
    </li>
    <li>
        <label for="email">Email*:</label>
        <input id="email" type="text" name="email" size="40" value="{{email | escape }}" {{ is_missing("email") }} />
    </li>
    <li>
        <label for="email2">Confirm email*:</label>
        <input id="email2" type="text" name="email2" size="40" value="{{email2 | escape }}" {{ is_missing("email2") }}/>
    </li>
    <li>
        <label for="organization">organization*:</label>
        <input id="organization" type="text" name="organization" size="40" value="{{organization | escape }}" {{ is_missing("organization") }}/>
    </li>
    <li>
        <label for="position">Job title:</label>
        <input id="position" type="text" name="position" size="40" />
    </li>
    <li>
        <label for="country">Country*:</label>
      <select id="country" name="country" value="{{country | escape }}" {{ is_missing("country") }}>
            <option value="">Choose&hellip;</option>
            <option disabled="disabled" value="">----</option>
            <option value="US">United States</option>
            <option disabled="disabled" value="">----</option>

            <option value="AF">Afghanistan</option>
            ...
            <option value="ZW">Zimbabwe</option>

        </select>

    </li>
    <br>
    <div>
    <li class="submit-row">
    <input class="link-button download-button" type="submit" value="Submit your details" />
    <br><br><input class="link-button" type="submit" value="Submit your details" />
    </li>
</form>

以及尽可能多的相关 CSS（#primary-content 是一个容器 div）：

li label {
    margin-left: -115px;
}
form#enquiry ul li input.link-button {
    margin-left: 110px;
}
.missinginput {
    border : red;
}
form#enquiry p.error-tip {
    left: 350px;
}

#primary-content form  {
  font-size:90%;
}

#primary-content form fieldset {
  border: 1px solid #ddd;
  padding: 6px;
  margin-bottom: 10px;
  margin-top: 10px;
}
#primary-content form fieldset legend {
  padding-left: 5px;
  padding-right: 5px;
  font-weight: bold;
  margin-bottom: 5px;
}
#primary-content form label {
  padding-right: 5px;
  font-weight: bold;
  margin-bottom: 5px;
}

#primary-content form fieldset dl, dl#form-dl {
  margin: 0;
  padding: 5px;
}
#primary-content form fieldset dl dt, dl#form-dl dt {
  clear: both;
  float: left;
  padding-top: 5px;
}
#primary-content form fieldset dl dd, dl#form-dl dd {
  padding-top: 5px;
  margin-left: 210px;
}

任何帮助将不胜感激，谢谢。

4

1 回答 1

0

这个问题已被解决。我发现宽度

form#enquiry ul li label

在我的 CSS 的其他地方，对象被设置为 220px，这与

li label {
    margin-left: -115px;
}

引起了问题。将宽度设置为 125px 并将 margin-left 设置为 0px 似乎已经解决了这个问题。

于 2013-07-10T15:21:08.830 回答