ボーダーボトムスタイリング。ナビゲーションバーのメニューと同じ幅の枠線を作成する

私のワードプレスのサイトに、コンテナとテキストを完全に一列に並べた水平線を作成しようとしています。 see image here ボーダーボトムスタイリング。ナビゲーションバーのメニューと同じ幅の枠線を作成する

私のサイトのボディーコンテナと整列しているようには見えません。ボトムボーダーのスタイルを変更して、例えば200pxの幅にする方法はありますか？？

2017-08-06 user8244486

下の境界線は、割り当てられている要素の長さになります。幅200pxの内側要素を作ることができます。 – mygeea

あなたは下のボーダーで固定幅とスタイルでそれを別のdivを作成することができます。

<body> 
    <div class="bodyContainer"> 
    <p>This is the main container.</p> 
    <div class="borderBottom"></div> 
    </div> 
</body>

CSS：

.borderBottom { 
    width: 300px; 
    border-bottom: 1px solid black; 
}

をあなたの体のコンテナが固定の高さを持っている場合は、移動します。 borderBottom divをボディコンテナの外側に移動します。希望が役立ちます。

出典

2017-08-06 00:38:54 Yeedub

もう1つの方法はCSS Pseudo-elementsのcurrently supported by all major browsersを使用することです。これにより、HTML内に余分なdivが削除されます。下記のコード例：

<div class="bodyContainer"> 
    <p>This is the main container.</p> 
</div> 

.bodyContainer::after { 
    content: ''; 
    width: 200px; 
    border-top: 1px solid black; 
    display: block; 
}

出典

2017-08-06 04:03:53 McLemore

ボーダーボトムスタイリング。ナビゲーションバーのメニューと同じ幅の枠線を作成する

答えて

関連する問題