右對齊表格單元格位置

Question

我使用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。這甚至可能沒有重大變化？

Answer 1

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

將您.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>

希望這有助於！

Answer 3

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

使用漂浮在右＃.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/