Question

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

问题是：我的菜单有三行。（我只需要一条直线。）我试过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.tomasprofilio.lt</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>

不知道出了什么问题......

Answer 1

链接设置为display:block，因此它们会换行。它们默认不排队。

如果您将li设置为display:inline-block，则它们只会根据链接的大小确定它们所需的宽度。

＆＃13;

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

＆＃13;

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

＆＃13;

CSS / HTML错误菜单

1 个答案: