右对齐表格单元格位置

Question

我正在使用display: table-cell创建一些带有按钮的工具栏：

body {
  margin: 0;
  padding: 0
}
#docs {
    color: #333
}

#docs .docs-header {
    height: 40px;
    background: #efefef;
    padding: 0 20px;
}

#docs .docs-header-item {
    height: inherit;
    vertical-align: middle;
    display: table-cell;
    padding: 0 13px 0 5px;
    font-size: 1.1em;
    cursor: pointer;
}

#docs .docs-header-item:hover {
    background: #e0e0e0
}

<div id="docs">
  <div class="docs-header">
    <div class="docs-header-item">
    Item #1
    </div>
    <div class="docs-header-item">
    Item #2
    </div>
    <div class="docs-header-item">
    Item #3
    </div>
    <div class="docs-header-item">
    Item #4
    </div>
  </div>
</div>

它运作良好，但我想将这些按钮中的一些对齐到条形图的右侧，如下图中的 Item＃4 ：

我无法使用float: right position: absolute; right: 0来.docs-header-item工作。这是否可能没有重大变化？

Answer 1

您可以在父元素上添加display: flex，在要向右移动的项目上添加margin-left: auto。另外，对于垂直居中的项目，您可以添加align-items: center。

body {
  margin: 0;
  padding: 0
}

#docs {
  color: #333
}

#docs .docs-header {
  height: 40px;
  background: #efefef;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

#docs .docs-header-item {
  padding: 0 13px 0 5px;
  font-size: 1.1em;
  cursor: pointer;
}
#docs .docs-header-item:last-child {
  margin-left: auto;
}

#docs .docs-header-item:hover {
  background: #e0e0e0
}

<div id="docs">
  <div class="docs-header">
    <div class="docs-header-item">
      Item #1
    </div>
    <div class="docs-header-item">
      Item #2
    </div>
    <div class="docs-header-item">
      Item #3
    </div>
    <div class="docs-header-item">
      Item #4
    </div>
  </div>
</div>

Answer 2

您可以使用flexbox轻松完成此操作。诀窍是设置为要从margin-left: auto开始对齐的元素，它将推动其余部分（请参阅CSS中的注释）：

body {
  margin: 0;
  padding: 0
}
#docs {
  color: #333
}
#docs .docs-header {
  /** change the display to flex **/
  display: flex;
  height: 40px;
  background: #efefef;
  padding: 0 20px;
}
#docs .docs-header-item {
  /** you can't use vertical-align, so set line-height **/
  line-height: 40px;
  padding: 0 13px 0 5px;
  font-size: 1.1em;
  cursor: pointer;
}
#docs .docs-header-item:hover {
  background: #e0e0e0
}

/** add this class to the element you want to start aligning right from **/
#docs .to-right {
  margin-left: auto;
}

<div id="docs">
  <div class="docs-header">
    <div class="docs-header-item">
      Item #1
    </div>
    <div class="docs-header-item to-right">
      Item #2
    </div>
    <div class="docs-header-item">
      Item #3
    </div>
    <div class="docs-header-item">
      Item #4
    </div>
  </div>
</div>

Answer 3

将.docs-header分为两部分left＆amp; right和float: left＆amp;分别为float: right。像：

#docs .docs-header.left {
    float: left;
}

#docs .docs-header.right {
    float: right;
}

请看下面的代码段：

body {
  margin: 0;
  padding: 0
}
#docs {
    color: #333;
    background: #efefef;
    float: left;
    width: 100%;
}

#docs .docs-header {
    height: 40px;
    padding: 0 20px;
}

#docs .docs-header.left {
    float: left;
}

#docs .docs-header.right {
    float: right;
}

#docs .docs-header-item {
    height: inherit;
    vertical-align: middle;
    display: table-cell;
    padding: 0 13px 0 5px;
    font-size: 1.1em;
    cursor: pointer;
}

#docs .docs-header-item:hover {
    background: #e0e0e0
}

<div id="docs">
  <div class="docs-header left">
    <div class="docs-header-item">
    Item #1
    </div>
    <div class="docs-header-item">
    Item #2
    </div>
    <div class="docs-header-item">
    Item #3
    </div>
  </div>
  <div class="docs-header right">
    <div class="docs-header-item">
    Item #4
    </div>
  </div>
</div>

希望这有帮助！

Answer 4

在.docs＃docs-header

中使用float

#docs .docs-header-item {
    height: inherit;
    vertical-align: middle;
    display: table-cell;
    padding: 0 13px 0 5px;
    font-size: 1.1em;
    cursor: pointer;
    background: blue;
    border: 1px solid yellow;
    float: right;
}

然后反转html中按钮的顺序。

https://jsfiddle.net/chris2001/b5Lt6wkn/1/