文章/答案/技术大牛

发布

社区首页 >问答首页 >CSS / HTML加密菜单

问CSS / HTML加密菜单
EN

Stack Overflow用户

提问于 2015-11-20 15:14:11

回答 1查看 107关注 0票数 0

我的菜单有问题，我只是一个初学者，我正在学习。

问题是:我的菜单分三行。(我只需要一条直线。)我试过display:inline，但不起作用。

我的CSS是这样的：

 body {
    height:auto;
    width:auto;
    background-image: url("img/bgr.png");
}

.header {
    text-align:center;
    margin:0px auto;
}

#header {
    height:300px;
    width:960px;
    background-image:url("img/top.png")
}
#menu ul {
    list-style: none;
}
#menu li a  {
    color:#fff; 
    text-decoration:none; 
    display:block; 
    background:url(img/manu.png); 
    padding:0 10px 0 10px;  
    height:54px; 
    width: 150px;

    line-height:54px;
}

#menu li a:hover {
    color:#fff; 
    text-decoration: none; 
    background:url(img/manu1.png);  
    height:54px; 
    width:150px;
    line-height:54px;
}

我的HTML是这样的：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Pagrindinis Puslapis</title>
</head>
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>
<div class="header" id="header">
    <tekstas><br><br><br><br><br><br>http://www.profilio.com</tekstas>
    </div>
<div class="header" id='menu'>
<ul>
   <li><a href='#'><span>Pagrindinis</span></a></li>
   <li><a href='#'><span>Kontaktai</span></a></li>
   <li><a href='#'><span>Paslaugos</span></a></li>
</ul>
</div>


    
</body>
</html>

不知道怎么回事..。

添加一些额外的文本

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-11-20 15:22:29

链接被设置为display:block，所以它们被包装了。在默认情况下，它们不排队。

如果您将li设置为display:inline-block，则它们的宽度仅为所需的宽度，这取决于链接的大小。

.header {
  text-align: center;
  margin: 0px auto;
  max-width: 960px;
  background: green;
}
#menu ul {
  list-style: none;
}
#menu li {
  display: inline-block;
}
#menu li a {
  color: #fff;
  text-decoration: none;
  display: block;
  background: blue;
  padding: 0 10px 0 10px;
  height: 54px;
  line-height: 54px;
  width:150px;
}
#menu li a:hover {
  color: #fff;
  text-decoration: none;
  background: red;
  height: 54px;
  line-height: 54px;
}

<header class="header" id="menu">
  <ul>
    <li><a href='#'><span>Pagrindinis</span></a>

    </li>
    <li><a href='#'><span>Kontaktai</span></a>

    </li>
    <li><a href='#'><span>Paslaugos</span></a>

    </li>
  </ul>
</header>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/33830068

复制

相似问题

问CSS / HTML加密菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS / HTML加密菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问CSS / HTML加密菜单
EN