右对齐表格单元格位置

我使用display: table-cell创建带有按钮的工具栏的somekind的：右对齐表格单元格位置

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>

它运作良好，但我想一些对齐的那些按钮在杆的右侧，像项目＃4下面的图片：

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

来源

2016-12-12 DontVoteMeDown

看看引导CSS，看看他们怎么'拉right' –

@MarkSchultheiss它只是使用'浮动：right'。我试过了，但是它弄乱了布局。 – DontVoteMeDown

是的，你必须看看整个CSS，以及它们如何设法使用那里的'pull-right'类。一种选择是只包含该CSS，但可能比您想要/需要的要多。 –

您可以使用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>

来源

2016-12-12 13:10:34

不错，谢谢！ – DontVoteMeDown

将您.docs-header分成两部分，分别为left & right和float: left & 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>

希望这有助于！

来源

2016-12-12 13:12:26

谢谢。它的工作，但我宁愿不改变HTML结构。 – DontVoteMeDown

您只需在父元素上添加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>

来源

2016-12-12 13:14:19

谢谢，它有效，但我会接受@ OriDrori的，因为他先回答。 – DontVoteMeDown

当然，很高兴我能帮上忙。 –

使用漂浮在右＃.docs文档头

#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/

来源

2016-12-12 13:19:23 Christa

谢谢，但我会保持其他用户提出的灵活解决方案。 – DontVoteMeDown

这个问题是'float：right'依次被应用，因为html结构是由CSS处理的，因此第一个元素是最右边的，因此您的评论为“反转元素”而不是最优雅的解决方案？ –

右对齐表格单元格位置

回答

相关问题