Question

我有一张桌子，在头排有2个textareas和2个按钮。 http://jsfiddle.net/8qzmxwa9/1/ 我使用margin: 0 auto;

style='white-space:nowrap;'

在元素上使它们在一行中。但正如你可以看到的那样，它们有点不平衡。我怎样才能让他们保持一条线。

Answer 1

为所有内容添加相同的vertical-align并删除textareas的填充，以便它们不会变大。像这样：

table, th, td 
{
   border: 1px solid black;
   font-size: 27px;
    vertical-align:middle;
    display:inline-block;
}
textarea
{
  text-align: center;
  height: 35px;
  width: 280px;
  margin: 0 auto;
  font-size: 27px;
    padding:0;
} 
button
{
  margin: 0 auto;
  font-size: 27px;
}

Answer 2

textarea
{
  text-align: center;
  height: 35px;
  width: 280px;
  margin: 0 auto;
  font-size: 27px;

    vertical-align: bottom;
}

DEMO

Answer 3

您可以使用display flex属性将项目对齐到一行：-

假设父div中有3个按钮，如下所示：-

<div class='parent'>
  <button class='child'> Button 1 </button>
  <button class='child'> Button 2 </button>
  <button class='child'> Button 3 </button>
</div>

现在，在您要对齐的所有子级上应用display：对父级显示flex和flex：1属性。

上面HTML代码的

CSS文件如下所示

.parent {
  display: flex;
}

.child {
  flex: 1;
}

Link for the above code

Link of answer for the question asked

将td中的元素对齐在一行中

3 个答案: