Question

我知道有很多与此主题相关的问题已被提出。我经历了他们中的大部分，但我仍然无法弄清楚为什么它在我的情况下不起作用。

我的网站使用旁边和文章标签分为两部分。我希望我的表单位于文章标签内。此外，我希望我的标签在我的输入旁边对齐。我试过了：

label{ display: inline-block; width: XXpx; text-align: right;} 

label{ display: block; width: XXpx; float: left;}

和其他配置，但它不起作用。事实是我在旁边使用display：table-cell和article标签来获取背景颜色以一直向下延伸到页面。我想知道它是否有影响。

HTML

<section>
.
.
.
<article>
.
.
.
<form method="post" action="Y.php">
<label for="name" id="name1"> Name<em>*</em> </label>
<input type="text" name="name" id="name2" placeholder="Ex : Tom" autofocus="" required="" /> <br>
<label for="email"> Email<em>*</em>  </label>  
<input type="email" name="email" id="email1" placeholder="Ex : Tom@gmail.com" required="" /> <br>  
</form>
</article>
</section>

CSS

aside, article{ display: table-cell;  vertical-align: top; text-align: justify; line-height: 1.5em;}
label{ display: inline-block; width: XXpx; text-align: right;}

欢迎任何想法！

Answer 1

您的意思是您希望标签具有相同的宽度，以便所有元素排列良好吗？您可以通过在标签中添加min-width来实现这一目标：

label {
  min-width: 100px; /* Or whatever value and unit you want. */
}

使用您的代码生成示例：http://codepen.io/TheDutchCoder/pen/GggQRR

对齐文章部分中标签旁边的输入

1 个答案: