综合编程

HTML and CSS3 menu questions

微信扫一扫,分享到朋友圈

HTML and CSS3 menu questions
0 0

Thank you for reading my question.

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

Here I'm stuck:
- I want the 'MENU ITEM 1-4' to be almost at the middle(height) of the%20image. However the%20image 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

Problem courtesy of: Pepe

Solution

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

And style it like so:

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

You need to put line height equal to the%20image 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

Solution courtesy of: dinodsaurus

CSS3 Recipes
感谢您的支持!

    Spring Cloud Data Flow 1.6 M2 发布

    上一篇

    $ (Ce) is null in .click (function () {& hell...

    下一篇

    您也可能喜欢

    评论已经被关闭。

    插入图片

    热门分类