2

我已经设置了三个 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>

我已经尝试了很多东西。我从来没有让它们与表格单元格一起正常工作，显示：块将要求我再次使用浮点数，我不知道如何在中间和内联块上获得正确的对齐 - 除了有那个讨厌的空间在编写易于阅读的 HTML 时，它们之间存在 - 需要进行大量调整才能正确处理，而这仅适用于一个按钮大小。

我想我正处于迷失的地步，因为我尝试了很多东西，但没有任何效果。所以我想我会在这里发布我的问题。

继续这个项目的最佳方式是什么？提前致谢。

4

2 回答 2

0

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

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;
}
于 2013-04-28T11:57:25.293 回答
0

我基于以下 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: centerand的流入块overflow: hidden，根据其他设计考虑，这可能是可选的。

我放了一些简单的 30px x 30px 图像，但我不确定您可能还需要什么。

希望这可以让你开始。

小提琴演示

于 2013-04-27T02:49:11.903 回答