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

在这里我被卡住了： - 我希望“菜单项 1-4”几乎位于图像的中间（高度）。然而，图像必须保持原样（所以要在最中心，就在底部）。如果可能的话，如果需要也可以改变它的位置。- 我希望“菜单项 1-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 回答