0

私の質問を読んでいただきありがとうございます。

HTMLとCSSに関して学ぶことはまだたくさんありますが、それでも私は試みています。しかし、これは私に問題をもたらしました（私は少し調べましたが、良い答えを見つけることができませんでした）：

ページ上部にヘッダーとしてメニューを作成したい。ただし、このメニューの中央には、ロゴとしての画像があります。それらを正しく並べることができなかったので、リストで使用しました

    <div class="wrap_header">
<ul>
    <li><a href="#">MENU ITEM 1</a></li>
    <li><a href="#">MENU ITEM 2</a></li>
    <li id="header logo"><img src="the image"></li> 
    <li><a href="#">MENU ITEM 3</a></li>
    <li><a href="#">MENU ITEM 4</a></li>
</ul>
</div><!--END wrap_header-->

ここで行き詰まっています：-「MENUITEM1-4」を画像のほぼ中央（高さ）に配置したい。ただし、画像はそのままにしておく必要があります（つまり、真ん中、一番下にあります）。可能であれば、必要に応じてその位置も変更できます。-「MENUITEM1-4」に高さ2pxの色付きの線で下線を付けたいのですが、その方法がわかりません。次のようになります。

empty space                   THE IMAGE
MENU ITEM 1    MENU ITEM 2    THE IMAGE    MENU ITEM 3    MENU ITEM 4
empty space                   THE IMAGE
4

1 に答える 1

1

質問を理解したかどうかわかりません。しかし、私の答えは次のようになります。

<div class="wrap_header">
<ul>
    <li><a href="#">MENU ITEM 1</a></li>
    <li><a href="#">MENU ITEM 2</a></li>
    <li id="header_logo"><img src="http://www.prskelet.com/images/logotip.jpg"/></li> 
    <li><a href="#">MENU ITEM 3</a></li>
    <li><a href="#">MENU ITEM 4</a></li>
</ul>
</div><!--END wrap_header-->

そして、そのようにスタイルを設定します。

    ul li{
            margin-right:20px;
            line-height:200px;
            float:left;
    } 
    ul li img{
            height:200px;
            width:auto; 
   }
   ul li a {
            text-decoration:none;
            border-bottom:2px solid red;
   }

行の高さを画像の高さと同じにしてから、垂直方向に揃える必要があります。選択した色でテキストに下線を付けるには、を追加する必要がありますborder-bottom。ここでjsFiddleを見ることができます

于 2013-02-15T12:57:14.420 に答える