は、私は私のナビゲーションバー側の境界線に問題があり、その背景画像（青い枠）

Question

を下に移動することなく、リストアイテム要素をプルダウンする必要があります。 navbarのリスト項目では、私はボーダー（青い線）の背景画像を使用しました。私のスクリーンショットで見ることができるように、私は2つのリスト項目を少し下に引っ張ることができるので、何らかの方法がありますか？私はこのリスト "が音声になる"と "メッセージ"を少しダウンさせなければならない。

marginまたはpositionを使用すると、境界線がこれらのリスト項目の背景イメージであるため、両方が機能しません。 したがって、私がバックグラウンドイメージを引き下げるときに、境界線のリスト項目も下に移動します。

Answer 1

box-sizing: border-boxを調べることをおすすめします。下のスニペットの.li, .lastItemからそのプロパティを削除すると、説明していた問題が発生します。

あなたのコードを投稿していないので、確かに分かりません。これが問題でない場合は、スニペットを更新してください（またはjsfiddleを使用してください）。

.navbar { 
 
    color: white; 
 
    box-sizing: border-box; 
 
} 
 

 
ul, li, div { 
 
    display: block; 
 
    background: blue; 
 
    color: white; 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 40px; 
 
} 
 

 
ul { 
 
    float: left; 
 
} 
 

 
li, .lastItem { 
 
    box-sizing: border-box; 
 
    border: red solid 1px; 
 
} 
 

 
li { 
 
    float: left; 
 
    padding-top: 9px; 
 
    border: red solid 1px; 
 
    font-size: 20px; 
 
} 
 

 
.lastItem { 
 
    padding-top: 4px; 
 
    float: right; 
 
    font-size: 30px; 
 
}

<div class="navbar"> 
 
    <ul> 
 
    <li>Hello</li> 
 
    <li>World</li> 
 
    </ul> 
 
    <div class="lastItem">What a fine day</div> 
 
</div>