css怎么控让一个ul里面的li之间间距不同呢？
3个回答
展开全部
要看这个li横向还是纵向，
横向的主要用padding-left和padding-right来控制，还可用li的宽度来控制；
纵向的就多点，除了有padding-top和padding-bottom来控制，还可以用li的高度以及li的行高来控制；
具体二种代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#a2 { font-family: Arial; font-size: 14px; color: #000000; text-decoration: none; margin: auto; height: 100px; width: 900px; padding: 0px; list-style-type: none; float: none; clear: both; border: 1px solid #000099; }
#a2 li { line-height: 30px; list-style-type: none; float: left; height: 30px; width: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #FFFFCC; border: 1px dashed #000066; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; text-align: center; }
#a1 li { font-family: "微软雅黑"; font-size: 14px; line-height: 30px; color: #333333; text-decoration: none; float: none; width: auto; height: 35px; padding: 6px; }
#a1 { border: thin solid #990000; }
-->
</style>
</head>
<body>
<div id="a2">
<ul>
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
<li>新闻标题4</li>
<li>新闻标题5</li>
</ul>
</div>
<p> </p>
<div id="a1">
<ul>
<li>这是新闻标题1</li>
<li>这是新闻标题2</li>
<li>这是新闻标题3</li>
<li>这是新闻标题4</li>
<li>这是新闻标题5</li>
</ul>
</div>
</body>
</html>
横向的主要用padding-left和padding-right来控制，还可用li的宽度来控制；
纵向的就多点，除了有padding-top和padding-bottom来控制，还可以用li的高度以及li的行高来控制；
具体二种代码如下：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#a2 { font-family: Arial; font-size: 14px; color: #000000; text-decoration: none; margin: auto; height: 100px; width: 900px; padding: 0px; list-style-type: none; float: none; clear: both; border: 1px solid #000099; }
#a2 li { line-height: 30px; list-style-type: none; float: left; height: 30px; width: auto; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; background-color: #FFFFCC; border: 1px dashed #000066; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; text-align: center; }
#a1 li { font-family: "微软雅黑"; font-size: 14px; line-height: 30px; color: #333333; text-decoration: none; float: none; width: auto; height: 35px; padding: 6px; }
#a1 { border: thin solid #990000; }
-->
</style>
</head>
<body>
<div id="a2">
<ul>
<li>新闻标题1</li>
<li>新闻标题2</li>
<li>新闻标题3</li>
<li>新闻标题4</li>
<li>新闻标题5</li>
</ul>
</div>
<p> </p>
<div id="a1">
<ul>
<li>这是新闻标题1</li>
<li>这是新闻标题2</li>
<li>这是新闻标题3</li>
<li>这是新闻标题4</li>
<li>这是新闻标题5</li>
</ul>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
那你就每个li给它定义一个样式，
如果li横排显示，则用margin-left , margin-right.
如果li坚排显示，则用margin-top , margin-bottom.
另外padding也可以。
如果li横排显示，则用margin-left , margin-right.
如果li坚排显示，则用margin-top , margin-bottom.
另外padding也可以。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用padding和margin
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
