Question

**I want CSS menu code to display menu with image horizontally**

enter image description here

我试着在这篇文章上提出同样的问题，但我得到的结果显示了垂直菜单

我如何水平显示它。如果我设置显示属性块然后它垂直设置菜单？请尽可能分享代码i asked same question her you will get code

请分享能给我预期结果的CSS和HTML代码;

Answer 1

我会做这样的事......

li#home {
   padding: 40px 0 0 0;
   background: url(images/home.png) no-repeat center top;
}

您可能还需要margin-bottom: -10px将其从兄弟姐妹中移除。

Answer 2

这是我要使用的代码。我不会假设你对HTML / CSS的了解，所以这里有：

HTML：

<ul id="navigation">
    <li class="home"><a href="#" title="Home">Home</a></li>
    <li class="car"><a href="#" title="Car">Car</a></li>
    <li class="mobile"><a href="#" title="Mobile">Mobile</a></li>
    <li class="old"><a href="#" title="OldThings">OldThings</a></li>
</ul>

CSS：

#navigation {
    list-style: none;
    margin: 0;
    padding: 0;
}
#navigation li {
    float: left;
}
#navigation li a {
    display: block;
    padding: 50px 20px 20px;
}

您还需要在“a”标签上添加您的图片（在“首页”项目上看到） - 我建议将其作为背景图片。

如果您确实希望“主页”链接与其他链接处于不同的级别，您只需将“主页”的类更改为以下内容：

#navigation li.home a {
    display: block;
    padding: 60px 20px 10px;
}

只需调整“a”样式的填充，以匹配您想要每个元素的位置（正如我猜测的那样:)）。您还必须添加颜色和悬停状态。

祝你好运！

Answer 3

你需要这个......

display: block;

内联水平放置所有元素。块将元素一个放在另一个之上。我认为你不能用display：block布局那个LI元素，因为你有一个元素和一个（或者在同一个LI元素中沿着这些行的东西。

你最好将一个LI元素的width属性设置得足够小，以便自动在下一行放置单词，而不是自动宽度。

Answer 4

只需使用clear：right; flow：left;你的形象见例子这是演示： http://3dserg.be/test/hormenu.html

这是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="nl" xml:lang="nl">
<head>

<style type="text/css">
#navcontainer
{
margin: 0;
padding: 0;
height: 22px;
font: 11px Verdana, sans-serif;
width: 100%;
border-bottom: 1px solid #bbb;
list-style-type: none;
background: #fff;
}

#navlist li
{
float: left;
margin: 0;
padding: 0;
width: auto;
display: block;
}

#navlist li a, #navlist li a:link
{
background: #fff;
color: #555;
text-decoration: none;
padding: 3px 5px 3px 5px;
display: block;
}

#navlist li a:hover
{
color: #039;
border-bottom: 3px solid #bbb;
cursor: pointer;
background: #eee;
}

#navlist li a#current, #navlist li a#current:link
{
color: #000;
cursor: default;
font-weight: bold;
border-bottom: 3px solid #999;
}

#navlist li a#current:hover
{
border-bottom: 3px solid #f90;
background: #eee;
}
#navlist li img 
{
clear:right;
flow:left;
}
</style>
</head>

<body>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#" id="current">Item one</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item two</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item three</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item four</a></li>
<li><img src="http://www.nieuwe-brug.nl/img/home_icon.png" alt="" /><a href="#">Item five</a></li>
</ul>
</div>
</body>
</html>

如何显示css水平菜单？

4 个答案: