HTML排版怎么实现元素横向放置？_随笔

Dreamweaver新建一个HTML文件——修改title为html+css——新建一个div id为“a”——设置代码，给li设置左浮动效果。

具体步骤：

1、用Dreamweaver新建一个HTML文件

2、修改title为html+css实现横向导航

3、新建一个div id为“a”，添加ul li标签

4、在li中添加自己想要的文字并调整好文字间距,按F12预览，如下图所示

5、首先去掉字体前面的小黑点，代码如下：

6、接下来，使文字横向排列，设置代码如下，给li设置左浮动效果

7、按F12预览，效果如下

你之所以出现这个问题，原因在于

li{

list-style:none

margin-top:0px

text-align:left

float:left

width:30px /* 这句限定了列表每列的宽度，宽度太小，所以文字变成竖写。去掉，或者改足够大 */

}

我把你的代码重新改了一下，可以稍微好一点。

无标题文档.html 文件代码如下：

<!doctype html>

<head>

</head>

<body>

/* <center/>标签去掉，这个标签是个淘汰的标签，可以用CSS控制 */

<ul>

<li>首页</li><li>家用电器</li><li>手机数码</li><li>日用百货</li><li>书籍</li><li>帮助中心</li><li>免费开店</li><li>全球咨询</li> /* li的代码全部连起来，可以让li之间没有一个默认的空格 */

</ul>

</div>

</body>

</html>

li.css 文件代码如下：

#cs {

background-image:url(admin.png)

width:1003px

height:78px

}

ul {

text-align: left /* 对ul使用左对齐 */

padding: 0.15em 0 1px 0

}

li {

display: inline /* 直接用内联行显示，不用float，float不好控制 */

}

欢迎分享，转载请注明来源：内存溢出

HTML排版怎么实现元素横向放置？