Question

我已经设置了三个div作为菜单按钮的容器。一个将按钮对齐页面左侧，另一个按钮对齐，最后一个按钮位于两个div之间。这就是CSS中的样子。

.actions {
    @include clearfix();
    .left {
        float: left;
        margin-left: $outside_margin;
        height: $actions_height;
        line-height: $actions_height;
    }
    .middle {
        text-align: center;
        margin-left: 0px auto;
        margin-right: 0px auto;
        height: $actions_height;
        line-height: $actions_height;
    }
    .right {
        float: right;
        margin-right: $outside_margin;
        height: $actions_height;
        line-height: $actions_height;
    }
}

这很有效。现在我正在尝试编写一个.button类，它将创建一个简单的盒装按钮，其中包含一个文本字，有时也是一个图像。这就是我的HTML的样子。

<div class="actions">
    <div class="left">
        <a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
    </div>
    <div class="right">
        <a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
    </div>
    <div class="middle">
        <a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
    </div>          
</div>

我尝试了很多东西。我从来没有让他们正常使用table-cells，display：block会要求我再次使用浮点数而且我不知道如何在中间版本和内联块上进行正确的对齐 - 除了让那个讨厌的空间在编写易于阅读的HTML时，它们之间需要进行大量的调整以获得正确的，然后只需要一个按钮大小。

我想我正处于失去的地步，因为我已经尝试了很多东西，但没有任何工作正常。所以我想我会在这里发布我的问题。

进行此项目的最佳方式是什么？提前谢谢。

Answer 1

我基于以下HTML创建了一个原型：

<div class="actions">
  <div class="left">
      <a class="button" href="#">
          <span class="text">Left</span><span class="image"><img src="http://placehold.it/30x30"></span></a>
  </div>

  <div class="right">
      <a class="button" href="#">
          <span class="text">Right</span><span class="image"><img src="http://placehold.it/30x30"></span></a>
  </div>
  <div class="middle">
      <a class="button" href="#">
          <span class="text">Middle</span><span class="image"><img src="http://placehold.it/30x30"></span>
      </a>
  </div>
</div>

并使用以下CSS：

.actions {
    outline: 1px dotted blue;
    height: 30px;
    line-height: 30px;
}
.actions a {
}
span.image img {
    vertical-align: bottom;
}
span.text {
    vertical-align: baseline;
}

.left {
    float: left;
    margin: 0 20px;
    outline: inherit;
}
.middle {
    display: block;
    text-align: center;
    margin-left: 0px auto;
    margin-right: 0px auto;
    outline: 1px dashed blue;;
    overflow: hidden;
}
.right {
    float: right;
    margin: 0 20px;
    outline: inherit;
}

我添加了一些轮廓，以便我们可以看到块延伸的距离以及边距的工作方式等等。

左右<div>是浮动的，没有异常，中间部分是text-align: center和overflow: hidden的流入区块，根据其他设计考虑因素，这可能是可选的

我输入了一些简单的30px x 30px图像，但我不确定你还需要什么。

希望这可以让你开始。

Fiddle Demo

Answer 2

似乎你无法让表格单元“工作”的原因是因为你没有意识到你需要垂直对齐细胞的内容以及细胞本身：

http://tinker.io/619bf/2

.actions {
    display: table;
    width: 100%;
}

.actions div {
    display: table-cell;
    border: 1px solid;
    vertical-align: middle;
    width: 33%
}

.actions div * {
    vertical-align: middle;
}

带浮动图像的内联按钮

2 个答案: