当前位置:编程学习 > html/css >>

我有个关于CSS编码的问题,是li和ul标签,请问以下代码如何变成横向?

<ul style="display: block; "> <list num="5" action="image" cachetime="1800" ifpushonly="0" title="广告列表2" /> <loop> <li><a href="{url}" target="_blank" onmousedown="return ttclick(this,'tracefrom=');"><img src="{image,190,60}" width="190" height="60" alt="{title}" title="{title}" border="0"></a></li> </loop> </ul>
答案:你把这段代码粘贴在dreamweaver里,打开来看看。就明白了。重点在ul的float,a的float,li的display这三个属性,你打开来看看就明白了。希望对你有帮助,不懂的可以在线call me.
<html>
<head>
<style type="text/css">
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:7em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300}
li {display:inline}
</style>
</head>

<body>
<ul>
<li><a href="#">Link one</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>

<p>
在上面的例子中,我们把 ul 元素和 a 元素浮向左浮动。li 元素显示为行内元素(元素前后没有换行)。这样就可以使列表排列成一行。ul 元素的宽度是 100%,列表中的每个超链接的宽度是 7em(当前字体尺寸的 7 倍)。我们添加了颜色和边框,以使其更漂亮。
</p>

</body>
</html>
其他:style="display:inline;" <ul style="display: block; ">
  <list num="5" action="image" cachetime="1800" ifpushonly="0" title="广告列表2" />
  <loop>
    <li style="float:left"><a  href="{url}" target="_blank" onmousedown="return ttclick(this,'tracefrom=');"><img src="{image,190,60}" width="190" height="60" alt="{title}" title="{title}" border="0"></a></li>
	<li style="float:left"><a  href="{url}" target="_blank" onmousedown="return ttclick(this,'tracefrom=');"><img src="{image,190,60}" width="190" height="60" alt="{title}" title="{title}" border="0"></a></li>
  </loop>
</ul> GHH 

上一个:如何简化边框的CSS代码
下一个:html嵌入php中的css问题

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,