将所有争议周围的表作为表单的布局选项,我决定使用无序列表。我终于按照我的意图显示标签和元素,但是我添加的'note'div拒绝与它上面的输入对齐。
我已经包含了下面的代码,请原谅我选择的花哨的背景颜色来帮助我判断位置!有没有人有任何关于为什么'note'div拒绝玩的建议?我确信这是一个简单的解决方案,但我完全被难倒了。非常感谢你提前。
form.contact label
{
float: left;
position: absolute;
background: red;
}
form.contact input
{
width: 200px;
margin-left: 15em;
}
form.contact .note
{
margin-left: 15em;
width: 176px;
background: yellow;
}
form.contact ul
{
list-style: none;
position: absolute;
padding: 0;
}
form.contact ul li
{
float: left;
clear: left;
width: 100%;
padding-bottom: 1em;
margin-bottom: 10px;
background: pink;
left: 0;
}
<ul>
<li>
<label for="address1">Address Line 1:</label>
<input name="address1" type="text" id="address1" />
</li>
<li>
<label for="address2">Address Line 2:</label>
<input name="address2" type="text" id="address2" />
</li>
<li>
<label for="address3">Address Line 3:</label>
<input name="address3" type="text" id="address3" />
</li>
<li>
<label for="address4">Address Line 4:</label>
<input name="address4" type="text" id="address4" />
<div class="note">This is a note</div>
</li>
<li>
<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
</li>
</ul>
答案 0 :(得分:6)
由于默认情况下input
和div
的字体大小不同,因此使用em
测量的弹性布局会受到字体大小的影响。
这解决了它:
* {font-size: 12px;}
答案 1 :(得分:0)
输入是内联元素,div.note是块元素。浏览器的默认css具有内联元素和div.notes的不同设置。我建议您尝试调整输入和.note的magin-left
和/或padding-left
值。您可能还需要像Finbarr指出的那样使用sepeficy font-size
。
答案 2 :(得分:0)
回想起几个答案。 首先,你考虑过defualt填充?我看到你指定了边距,但如果你没有包含固定的填充级别,不同的元素可能会以不同的方式继承它。
如果您可以发布屏幕截图也会有所帮助 - 当我在konqueror&amp; amp;中测试时,您提供的示例代码对我来说非常适合。 firefox - 也许是浏览器的问题?
...好吧,我看到当我打字时,弱点已经说了几乎相同的东西。但是,我的截图评论代表;如你所见,确切地看到错误是有帮助的。