![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
我有个关于CSS编码的问题,是li和ul标签,请问以下代码如何变成横向?
<ulstyle="display:block;"><listnum="5"action="image"cachetime="1800"ifpushonly="0"tit...
<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> 展开
<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> 展开
3个回答
展开全部
你把这段代码粘贴在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>
<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>
![](https://ecmc.bdimg.com/public03/b4cb859ca634443212c22993b0c87088.png)
2023-08-29 广告
"StormProxies是全球大数据IP资源服务商,其住宅代理网络由真实的家庭住宅IP组成,可为企业或个人提供满足各种场景的代理产品。点击免费测试(注册即送1G流量)StormProxies有哪些优势?1、IP+端口提取形式,不限带宽,I...
点击进入详情页
本回答由Storm代理提供
展开全部
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
style="display:inline;"
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询