Question

我有两个按钮，因为我需要它们显示在一行中并且垂直对齐文本，我使用display: table-cell。但两个div粘在一起。保证金在这里不起作用。有没有办法将它们分开？

Answer 1

你是否关心中间是否有额外的<div>？如果没有，这可能有效：

<div id="select">
    <div class="btparent" id="parent1">parent1</div>
    <div style="width: 3px;display:table-cell;"></div>
    <div class="btparent" id="parent2">parent2</div>
</div>

Answer 2

为什么不使用

#select .btparent { display:inline-block; }

Answer 3

我建议您在css中使用float而不是display: table-cell。这是在我调整你的代码之后。如果您使用float，请不要忘记在容器中添加任何 clear floating 方法（#select）

#select {
  margin: 0 auto;
  max-width: 300px;
  /* one of clear floating method: use 'overflow:hidden' */
  overflow: hidden;
}
  #select .btparent {
    border: 5px #AEE239 solid;
    color: #2D332D;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    font-family: Palatino;
    font-size: 16px;
    background: #D9E6BB;
    padding: 10px;
    width: 100px;
    /* change here */
    height: 20px;
    display: block;
    float: left;
    margin-right: 10px;
    /* ----------- */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    border-radius: 15px;
  }

希望这可以帮助你..

设置两个表格单元格之间的边距

3 个答案: