0

我正在学习 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 而没有图像。

显示类似的东西

在此处输入图像描述

但这不是我在浏览器中得到的。我在浏览器中得到的是跟随 在此处输入图像描述 我可能做的错误是什么？

4

3 回答 3

0

将 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>
于 2013-11-01T06:44:58.110 回答
0

使用此 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;
    }
于 2013-11-01T07:23:22.620 回答
0

希望能帮助到你，

 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/

于 2013-11-01T06:47:49.560 回答