1

我是 CSS + 表格的新手，需要一些帮助。

这是我的表格：

<form id="form" name="form" method="POST" action="contact.asp" accept-charset="utf-8" style="width:540px;">
  <div>
    <label for="name">
      <span class="requ">Name:</span>
      <input type="text" name="name" style="width:180px;">
    </label>
    <label for="email">
      <span class="requ">E-mail:</span>
      <input type="text" name="email" style="width:316px;">
    </label>
  </div>
  <div>
    <label for="message">
      <span class="requ">Message:</span>
      <textarea name="message" rows="8" style="width:518px;"></textarea>
    </label>
  </div>
  <div id="reqmsg"><strong>Important!</strong> Fields with asterisk are required!</div>
  <div id="buttons">
    <input type="submit" name="send" value="Send">
    <input type="reset" name="clear" value="Clear">
  </div>
</form>

这是CSS：

#form { padding:0; margin:0 auto; }
#form label { float:left; padding:0; margin:6px; font-family:Arial, Helvetica, sans-serif; }
#form label span { display: block; margin-left:2px; font-size:12px; font-weight: bold; color:#5C5C5C; }
#form label span.requ { background-image:url(../images/required.png); background-repeat:no-repeat; background-position:right 5px; }
#form input { border:1px solid #939393; border-radius:6px; font-size:14px; background-color:#F8F8F8; }
#form input[type="text"] { padding:4px; color:#0067CE; }
#form select { padding:3px; color:#0067CE; border:1px solid #939393; border-radius:6px; background-color:#F8F8F8; cursor:pointer; }
#form textarea { padding:4px; font:normal 14px Arial, Helvetica, sans-serif; color:#0067CE; border:1px solid #939393; border-radius:6px; background-color:#F8F8F8; }
#form input[type="submit"] { width:100px; height:28px; padding:0; margin:0 5px 0 5px; font-size:15px; font-weight:bold; color:#FFFFFF; border: 1px solid #0062C4; border-radius:6px; background-color:#00A0DD; cursor:pointer; }
#form input[type="reset"]  { width:100px; height:28px; padding:0; margin:0 5px 0 5px; font-size:15px; font-weight:bold; color:#FFFFFF; border: 1px solid #707070; border-radius:6px; background-color:#9F9F9F; cursor:pointer; }
#form #reqmsg { display: block; padding:0; margin-top:10px; font:normal 12px Arial, Helvetica, sans-serif; color:#5C5C5C; text-align:center; border:1px solid #000000; }
#form #buttons { display: block; padding:0; margin-top:10px; text-align:center; border:1px solid #000000; }

我遇到的问题是 div“reqmsg”。我用边框来检查问题，它覆盖了所有的表格。我想把这个 div 分开，所以我可以定义一个顶部和底部边距。与“按钮” div 相同。

有什么建议么？

4

2 回答 2

2

问题在于浮动<label>元素。您需要清除浮动，否则您的布局问题将持续存在。

我创建了一个JsFiddle，其中包含一个通过添加.clear {clear: both;}为 CSS 类并应用于<div class="clear"></div>适当区域来清除的示例。

于 2013-11-08T14:20:51.323 回答
1

当一个元素浮动时，它会从 html 的结构中删除。如果另一个元素中的每个元素都是浮动的，则包含元素会认为它是空的，并且将显示为没有高度。里面的浮动元素仍然显示，它们仍然将下一个元素推到页面下方。这会导致没有浮动元素的第一个元素认为它从页面顶部开始。

解决方案是像这样在#reqmsg 之前添加一个空的div<div style="clear: both"></div>

于 2013-11-08T14:31:42.320 回答