怎样使导航条运用以下CSS样式后成横向显示. 150
/*CSSDocument*/p{font-family:Verdana,sans-serif;font-size:11px;color:#000000;line-hei...
/* CSS Document */
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
.bold {
font-family: Verdana, sans-serf;
font-size: 11px;
line-height: 18px;
font-weight: bold;
color: #990000;
}
.navigation{
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #993300;
display: block;
padding: 8px;
width: 140px;
}
.navigation:hover{
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #D03D03;
display: block;
padding: 8px;
width: 140px;
}
navigation是用在表格行里的文字上面...td标签. 展开
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
.bold {
font-family: Verdana, sans-serf;
font-size: 11px;
line-height: 18px;
font-weight: bold;
color: #990000;
}
.navigation{
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #993300;
display: block;
padding: 8px;
width: 140px;
}
.navigation:hover{
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #D03D03;
display: block;
padding: 8px;
width: 140px;
}
navigation是用在表格行里的文字上面...td标签. 展开
展开全部
使导航条运用以下CSS样式后成横向显示，首先我们需要给这个导航条的li设置一个float属性，这样导航条就能够横向的显示，横向之后的间隔你可以通过给这个li这是width和height，或者是padding来实现，个人建议用padding，能实现等比的间隔，例子如下：
<html>
<head>
<style>
#nav{
width:900px;
height:30px;
}
#nav ul li{
float:left;
padding:5px 30px; //通过padding实现
}
#nav ul li{
float:left;
width:60px; //通过width实现
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="">首页</a>
</li>
<li>
<a href="">兴趣爱好</a>
</li>
<li>
<a href="index.php">好友印象</a>
</li>
<li>
<a href="register.php">会员注册</a>
</li>
<li>
<a href="dengtu.php">会员登录</a>
</li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在css样式中关于li的横向排列的方法大致有两种：
第一种 ：直接在<li>里面设置样式
<ul style="list-style:none;">
<li style="display:inline">横向排列</li>
<li style="display:inline">横向排列</li>
</ul>
第二种：定义li的css样式
<style type="text/css">
<!--
.a{
background-color:#ccccc;
text-align:center;
float:left;
width:70px;margin:3px;
padding:3px;
list-style:none;
}
-->
或者
定义li的css样式
<style type="text/css">
<!--
li{
background-color:#ccccc;
text-align:center;
float:left;
width:70px;margin:3px;
padding:3px;
list-style:none;
}
-->
第一种 ：直接在<li>里面设置样式
<ul style="list-style:none;">
<li style="display:inline">横向排列</li>
<li style="display:inline">横向排列</li>
</ul>
第二种：定义li的css样式
<style type="text/css">
<!--
.a{
background-color:#ccccc;
text-align:center;
float:left;
width:70px;margin:3px;
padding:3px;
list-style:none;
}
-->
或者
定义li的css样式
<style type="text/css">
<!--
li{
background-color:#ccccc;
text-align:center;
float:left;
width:70px;margin:3px;
padding:3px;
list-style:none;
}
-->
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这要看你把这段css用在什么标记上了，如果是div或者li上，需要去掉display: block;，然后添加float:left;
如果运用在span上，只需要去掉display: block;即可。
如果运用在span上，只需要去掉display: block;即可。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你直接float：left不就可以横向排列了吗
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
.navigation{
/* float:left; */
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #993300;
display: block; /* display:inline-block; */
padding: 8px;
width: 140px;
}
.navigation:hover{
background-color: #D03D03;
}
</style>
</head>
<body>
<p>
<span class="navigation" href="">123123</span>
<span class="navigation" href="">123123</span>
<span class="navigation" href="">123123</span>
<span class="navigation" href="">123123</span>
</p>
</body>
</html>
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
p{
font-family: Verdana, sans-serif;
font-size: 11px;
color: #000000;
line-height: 18px;
padding: 3px;
}
.navigation{
/* float:left; */
font-family: Verdana, sans-serif;
font-size: 16px;
font-style: normal;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
background-color: #993300;
display: block; /* display:inline-block; */
padding: 8px;
width: 140px;
}
.navigation:hover{
background-color: #D03D03;
}
</style>
</head>
<body>
<p>
<span class="navigation" href="">123123</span>
<span class="navigation" href="">123123</span>
<span class="navigation" href="">123123</span>
<span class="navigation" href="">123123</span>
</p>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
