HTML和CSS3菜单问题 [英] HTML and CSS3 menu questions

问题描述

感谢您阅读我的问题。

我仍然有很多要了解HTML和CSS，但我想。但是，这给我带来了一个问题（我搜索了一下，但找不到一个好的答案）：

I still have a lot to learn regarding HTML and CSS, yet I'm trying. However, this brought me to a problem (I searched around a bit, but couldn't find a good answer):

我想做一个菜单的顶部我的页面，作为标题。然而，在这个菜单的中间有一个图像，作为标志。
无法正确地使它们相邻。

I want to make a menu on the top of my page, as header. However, in the middle of this menu there is an image, as logo. Failing to get them next to each other correctly, I used them in a list

    <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用一个2px高的彩色线条加下划线，不知道该怎么做。
它将看起来像这样：

Here I'm stuck: - I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the image. However the image has to stay were it is(so be at the very center, just at the bottom). If possible being able to change its position too if needed. - I want the 'MENU ITEM 1-4' to be underlined by a 2px high,colored line, not sure how to do that. It'll have to look something like this:

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

推荐答案

我不知道我是否理解这个问题。但我的回答是：

I'm not sure whether I understood the question. But to my answer would be:

<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

You need to put line height equal to the image height and then vertically align it. To underline text with a color you chose you will need to add border-bottom. Here you can see jsFiddle

这篇关于HTML和CSS3菜单问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！