Question

我正在学习web开发，html css之类的东西。我尽我所知写了下面的css，但是当我在浏览器中查看它时，它并没有像我预期的那样出现。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Jenware | Personalized Gifts</title>
<style type="text/css">

p.float {
  float: left;
  width: 200px;
  margin: 0px;
  background: #CCC;
 }

p {
 border: 1px solid red;
}

ul  {
list-style-type: none;
margin: 0;
padding: 0;
}

ul li {
float: left;
}

ul li a {
display: block;
/* more styles */
}


</style>

</head>

<body>
<ul> 
  <li><a href="#">Serif</a></li>
  <li><a href="#">Sans-serif</a></li>
  <li><a href="#">Script</a></li>
  <li><a href="#">Display</a></li>
  <li><a href="#">Dingbats</a></li>
</ul>


</body>
</html>

我希望盒子，即无序列表只使用CSS而不是图像转换为类似于标签的菜单。

显示像

这样的东西

enter image description here

但这不是我在浏览器中得到的。我在浏览器中得到的是以下内容 enter image description here 我可能在做什么错误？

Answer 1

将css更改为

<style type="text/css">

p.float {
  float: left;
  width: 200px;
  margin: 0px;
  background: #CCC;
 }

p {
 border: 1px solid red;
}

ul  {
list-style-type: none;
margin: 0;
padding: 0;
}

ul li {
float: left;
    height:40px;
    width:auto;
    background:red;
    margin:2px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

ul li a {
display: block;
/* more styles */
}


</style>

Answer 2

希望它有所帮助，

 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    font-family: "Trebuchet MS";
font-size: 18px;
float: left;
width: auto;
margin: 2px;
padding: 6px;
width: 200px;
text-align: center;
background-color: #7B8898;
border-radius: 8px 8px 0 0;
}

ul li a {
    display: block;
    /* more styles */
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}

ul li a:hover {
    display: block;
    font-family: "Trebuchet MS";
    font-size: 18px;
    color: #990000;
}

演示：http://jsfiddle.net/suj3j/1/

Answer 3

使用此CSS呈现菜单的预期格式。

ul {
list-style-type: none;
margin: 0;
padding: 0;
    }
ul li {
font-family: arial, helvetica, sans-serif;
font-size: 13px;
float: left;
margin: 2px;
padding: 6px;
background:#7B8898;
border-radius: 8px 8px 0 0;
    }
ul li a {
display: block;
color: #fff;
font-weight: bold;
text-decoration: none;
    }

只使用css和html显示菜单

3 个答案: