ボーダー右の高さを縦中央に合わせる方法

Question

私はアジア人です。私は英語の文章や文法が良くないので、すみません。

HTML、JSP、CSSを使用して掲示板のビューページをデザインしています。タグを使用して実装しています。

ライター、閲覧番号、タイトルなどの書かれた情報とタグの間に区別された正しい行を実装したいと考えています。下のような画像が表示されます。縦線と高さの中間線のように見えます。 私はこれをCSS属性関連のborder-rightを使って実装したいと思います。

CSSを使用してこれをどのように設計できますか？ pls T.T ;;

私が作りたいと思っている下の試験の画像を参照してください。 よろしく、

Answer 1

あなたは次のようにCSS borderプロパティを適用することにより、これを行うことができます - のborder-right：太い溝黒を。 または コンテンツ間に|のような署名規約を適用できます。 私の答えがあなたを助けてくれることを願っています。 もしそうなら、私をアップグレードしてください。

Answer 2

これはあなたが

.overview { border-top: medium solid darkgray; } 
 
.row { 
 
    width: 100%; 
 
    padding: 0.2em 0; 
 
    border-bottom: thin solid darkgray; 
 
} 
 

 
span { 
 
    display: inline-block; 
 
    min-width: 6em; 
 
    padding: 0 1em; 
 
} 
 

 
.h6 { 
 
    font-weight: 600; 
 
    text-align: center; 
 
} 
 

 
.b-r { 
 
    border-right: thin solid darkgray; 
 
}

<div class="overview"> 
 
    <div class="row"> 
 
    <span class="h6 b-r">title</span> 
 
    <span>today's calendar</span> 
 
    </div> 
 
    <div class="row"> 
 
    <span class="h6 b-r">writer</span> 
 
    <span class="b-r">administrator</span> 
 
    <span class="h6 b-r">date</span> 
 
    <span class="b-r">2017-06-15</span> 
 
    </div> 
 
    <div class="row"> 
 
    <span class="h6 b-r">appended file</span> 
 
    <span>TimeTable.pdf</span> 
 
    </div> 
 
</div>