Question

我认为这可能是一个愚蠢的问题，但我真的无法弄清楚我在做什么是错的

<!DOCTYPE html>
<html>
<body>

<table border="1" height = "300px">
 <tr>
   <td>Cell A</td>
   <td>Cell B</td>
   <td>
      <div id="myCellContainer">
         <select id="mySelect"/>
         <label id="myMessage">My label</label>
      </div>
   </td>
 </tr>
</table>

</body>
</html>

当渲染时，我希望我的标签显示在选择框下方，但事实并非如此。任何帮助表示赞赏。

谢谢

Answer 1

问题是<label>位于<select>元素内。看看渲染的标记。该元素不是有效的自闭合或无效元素，如the spec所述。

应该是：

<select></select>

一旦你解决了这个问题，你仍然需要应用块级别显示来将标签放在它自己的行上：

#myMessage {
  display:block;
}

但更深层次的问题是，为什么使用<table>来布局<form>？表单元素不是表格数据。您输入进入 <form>的信息可能是表格式的，但<form>本身并非如此。纯粹使用CSS和适当的容器可以实现完美的定位和造型。

Answer 2

尝试使用：

<select id="mySelect"></select>

此方法不是自动关闭标记。

Answer 3

您需要正确关闭html。您还需要为width 100%

添加标签

DEMO http://jsfiddle.net/LstNS/36/

Answer 4

您可以选择{ display: block }，也可以在选择后加<br/>。因为它位于你的select是一个内联块，并且跟随标记占据相同的行，除非它包装。

为什么我的标签不会显示在选择小部件下方

4 个答案: