CSS问题,如何让<ul>水平排列

这个<ul>是在<nav>当中分,它已经在页面中居中显示了
就是这样

但是我想把那几个<li>水平放置,我应该怎么做呢?

让<ul>水平排列:关键之处在于设置ul或者li标签的浮动:float:left;或者float:right;第一个是靠左浮动,第二个靠右浮动;下面是代码展示ul中设置的li标签居左浮动:
<style>

ul li{ float:left; margin-left:20px; list-style-type:none;}

</style>
<ul>
<li>靠左浮动排列一</li>
<li>靠左浮动排列二</li>
<li>靠左浮动排列三</li>
<li>靠左浮动排列四</li>
</ul>
li标签居左浮动,实现ul水平排列;
margin-left:20px;左外侧距离20px,list-style-type:none;去除无序列表的点;
温馨提示:内容为网友见解,仅供参考
第1个回答  2014-08-17
额……………………你必须要用<ul>和<li>吗……换成<table>不就轻松愉快了追问

我想通过ul中的list-style-image来加一些装饰
就是图中的小绿点
table也可以的吗
如果可以就一个小例子
谢谢

追答

在<table>的每个单元格里放一张图片和一段文字就行了嘛。形如:

<table>
<tr>
<td>
<img src="..." /><span>some text</span>
</td> 
<td>...</td>
<td>...</td>  
</tr>
</table>

本回答被提问者和网友采纳

CSS问题,如何让<ul>水平排列
让<ul>水平排列:关键之处在于设置ul或者li标签的浮动:float:left;或者float:right;第一个是靠左浮动,第二个靠右浮动;下面是代码展示ul中设置的li标签居左浮动:<style> ul li{ float:left; margin-left:20px; list-style-type:none;} <\/style> <ul> <li>靠左浮动排列一<\/li> <li>靠左...

ul如何在div里水平居中?html\/css
1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。2、在index.html中的<ul>标签中,输入样式代码:text-align: center;list-style: none;。3、浏览器运行index.html页面,此时ul成功在div中居中了。

css项目列表如何水平放置
列表项目默认分行排列,那么将列表项设置浮动就可以实现水平放置 li{float:left;}示例如下:创建Html元素 <ul><li>itemlist-1<\/li><li>itemlist-2<\/li><li>itemlist-3<\/li><li>itemlist-4<\/li><\/ul>设置css样式 ul{width:500px;height:50px;line-height:50px;padding:10px 25px;border:...

htmlcss里面一个div里的ul怎么让他居中对齐?
1、首先先打开我们的开发环境新建一个web项目。2、在html中引入css文件这里是html页面的代码div和ul。3、将所有标签的margin和padding初始为0然后将父级div的display设置为flexalign-items设置为center。4、运行web项目后得到的结果如图所示垂直居中了。5、 将display设置为table-cell,将vertical-align设置...

让ul在div里水平居中
代码含义:text-align:center 属性规定元素中的文本的水平对齐方式。代码源件:<!DOCTYPE html> <html> <head> <meta charset="utf-8" \/> <title><\/title> <style> body,div,ul{padding:0px;margin: 0px;} <\/style> <\/head> <body> <div style="width:400px;height:100px; back...

css样式修改li水平显示
你把li的样式里面增加个浮动的样式。float:left;至于每排4个,那就看你ul宽度多宽,以及每一个li的宽度(例如ul总的宽度是600px,li如果想要4个一排那么每一个里就是600\/4的宽度)

css布局问题<ul>标签多出空白部分
ul,li{margin:0;padding:0;}

css 如何设置ul的列表图标和列表文字对齐
1、将li的height和line-height设置成为和设计稿一样的 2、将列表图标整体切出来,铺在ul上,不平铺 3、使用background-position控制ul背景和li中的文字对齐即可。。。

css 如何给 ul 列表做样式优化?
您可以使用CSS来优化ul列表的样式。以下是一些常见的样式优化方法:1. 设置列表样式类型为没有列表项标记,设置填充和边距0px(浏览器兼容性)。2. 设置ul中所有li的图像URL,并设置它只显示一次(无重复)。3. 用padding-left属性把文本置于列表中。

谁能告诉我。。。这段代码里UL LI中怎么水平居中!!!
把那个float:left去掉。你都让它向左浮动了,它还怎么居中。display:inline;就已经可以让它们在一行了。

相似回答