右揃えテーブルセルのdivの位置

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のいずれも使用できませんでした。大きな変更なしにこれも可能ですか？

Answer 1

これはフレックスボックスで簡単に行うことができます。トリックはあなたが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を2つの部分に分けて、left & rightおよびfloat: left & 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>

・ホープ、このことができます：

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

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

は、以下のスニペットを見てください！

Answer 3

親要素にdisplay: flexを追加し、右に移動する項目にmargin-left: autoを追加することができます。また、アイテムを垂直方向に調整する場合は、align-items: centerを追加できます。 .docs番号ドキュメントヘッダに

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