Question

我已设置单选按钮以在联系表单上显示内嵌。它们在除IE7之外的所有测试浏览器中都能正常显示，它们不会显示内联。它们是使用ul和li设置的。

单选按钮的CSS

fieldset div ul {
    margin: 5px 0 0 0;
    list-style:none;
    display:block;
    float:left;
}

fieldset div ul li {
    margin: 0 15px 0 0;
    padding: 0;
    list-style:none;
    display:inline;
    float:none;
}

fieldset div ul li label {
    display: inline;
    float: none;
    font-size: 1em;
    font-weight: normal;
    margin: 0;
    padding: 0;
}

fieldset div ul li input {
    background: none;
    border: none;
    display: inline;
    margin: 0 5px 0 0;
    padding: 0;
    width: auto;
    float:none;
}

表单的HTML

<fieldset>
  <!-- Your Name -->
  <div>
    <label for="name">Name</label>
    <input type="text" name="name" id="name" class="required"/>
    </div>

  <!-- Email -->
  <div>
    <label for="emailAddress">Email</label>
    <input type="text" name="emailAddress" id="emailAddress" class="required email"/>
    </div>

  <!-- Phone -->
  <div>
    <label for="phone">Phone</label>
    <input type="text" name="phone" id="phone" />
    </div>

  <!-- Contact Time -->
  <div>
  <label for="contactTime">Best Time to Contact</label>
  <ul>
  <li><input type="radio" name="contactTime" value="morning" /><label for="morning">Morning</label></li>
  <li><input type="radio" name="contactTime" value="day" /><label for="day">Day</label></li>
  <li><input type="radio" name="contactTime" value="evening" /><label for="evening">Evening</label></li>
  </ul>
  </div>



  <!-- Contact Method -->
  <div>
  <label for="contactMethod" style="margin:15px 0 0 0;">Best Method of Contact</label>
  <ul>
  <li><input type="radio" name="contactMethod" value="phone" /><label for="phone">Phone</label></li>
  <li><input type="radio" name="contactMethod" value="email" /><label for="email">Email</label></li>
  </ul>
  </div>


  <!-- Coments -->
  <div class="floatLeft" style="margin:10px 0 0 0;">
    <label for="mess">Message</label>
    <textarea name="mess" id="mess" rows="15" cols="5"></textarea>
    </div>

  <!-- Controls -->
  <div class="controls">
    <input id="submit" name="submit" type="submit" value="Contact Us" class="button"/>
    </div>
  </fieldset>
<input name="url" type="hidden" value="" class="noDisplay"/>

Answer 1

尝试将它们设置为向左浮动 -

fieldset div ul li {
    margin: 0 15px 0 0;
    padding: 0;
    list-style:none;
    display:inline;
    float:left;
}

不应该影响任何其他浏览器，并应该排除IE7。不要忘了clear: left;之后。

单选按钮不会在IE7中显示内联

1 个答案: