html - 在 asp.net 和 css 中对齐控件

Question

我有一个网络表单应用程序，我已经设计好了，如图所示。

现在这是同一页面的浏览器渲染。

如您所见，输出完全未对齐。但设计师文件我很完美。

标记太长，无法在此处发布，但我有两个 div，一左一右，完美对齐。

我使用以下 css 标签

  .label, .textbox{
  width:150px;
  text-align:left;
  float:left;
  display:block;
  }
 .label, .dropdownlist{
 width:150px;
 text-align:left;
 float:left;
 display:block;
 }
 .label,.dropdownlist{

 text-align:left;
 float:left;
 display:block;
 margin-left: 23px;
  }

我能想到没有其他相关的东西可以产生这样错误的输出。还有一件事，每个控件都嵌套在一个 ul 标签中。

非常感谢任何和所有的帮助。

Answer 1

我认为清理您的 CSS 可能会有所帮助，它有点多余。以下等同于您当前的 CSS 规则:

.label, .textbox, .dropdownlist
{
    width:150px;
    text-align:left;
    float:left;
    display:block;
}

.label,.dropdownlist
{
     margin-left: 23px;
}

这对于你想要完成的事情来说实际上看起来没问题(我认为 display:inline-block 可能是一个更语义化的选择，但由于你已经向左浮动，我不'认为它有所作为)。

但是，这个声明:

one more thing every control is nested withing a ul tag

有点担心我。看起来围绕您的控件的任何内容都没有以 150 像素宽的 block 样式格式显示，这导致您的元素之间的空间取决于标签中的字符数。

您可以使用浏览器的开发人员工具来查看当前将 Label 控件(或 Label 控件周围包裹的任何内容)的宽度设置为小于 150 像素的 CSS 规则。

如果您展示您的 HTML 会很有帮助——或者更好的是，在 jsfiddle.net 上展示一个演示问题的小例子。