Question

感谢您阅读我的问题。

我还有很多关于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

Answer 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

HTML和CSS3菜单问题

1 个答案: