在困难CSS样式形式

与所有的争议周边表为形式的布局选项，我决定去与一个无序列表。我终于将标签和元素显示为我的意图，但是我添加的'note'div拒绝与上面的输入对齐。在困难CSS样式形式

我已经包含下面的代码，请原谅我选择帮我判断放置扎眼的背景颜色！有没有人有任何建议，为什么这个'笔记'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>

来源

2010-12-01 Jonathan

你忘了包括`<形式类=“接触”>`开始标记和在HTML代码片段中的``结束标记。 – Finbarr 2010-12-01 13:24:10

有关表格的布局没有争议。它只是没有完成，期间。 – Rob 2010-12-01 13:48:37

我知道表格在布局方面是一个明确的禁忌。然而，我已经读过，表格仍然是列表数据的合乎逻辑的选项 - 不管表格是否属于灰色区域。 – Jonathan 2010-12-01 14:21:02

由于input和div具有默认不同的字体大小，和使用弹性布局em测量由字体的大小的影响。

这修复它：

* {font-size: 12px;}

来源

2010-12-01 13:17:52 Finbarr

输入是内嵌元件和div.note是块状元件。浏览器的默认CSS有内联元素和div.notes的不同设置。我建议您尝试调整magin-left和/或padding-left输入和.note的值。 Finbarr指出，您可能还需要确认font-size。

来源

2010-12-01 13:20:59 weakish

一对夫妇的答案映入脑海。首先，您是否考虑过defualt填充？我看到你指定了边距，但是如果你没有包含一个固定的填充级别，不同的元素可能会以不同的方式继承它。

如果您可以发布屏幕截图也会有所帮助 - 您提供的示例代码适用于我，当我在konqueror中测试它时，它可能是浏览器问题？

...好，我看到weakish已经表示，几乎同样的事情，我打字这一段时间。但是，我的截图评论立场;正如你所看到的那样，准确地看到错误是什么会有帮助。

来源

2010-12-01 13:26:09 Benubird

在困难CSS样式形式

回答

相关问题