檬味博客 » 问答 » css怎么让三个标签横排呢？

css怎么让三个标签横排呢？

1、打开所需测试的软件，创建一个新的html 2、写入要实现效果的代码：3、利用css来控制横排展示；4、展示的效果为：详解css：主要是控制li标签的靠左浮动：float:left；当然，展示在一排，靠右浮动也是可以的，list-style-type:none; 意思是：去除图2展示的前面的点；至于margi-right:20px；让li标签...
css怎么让三个标签横排呢？
兄弟，首先指出你个错误：
id的值不可以由数字开头
还有，id 的值是唯一的，也就是说不可重复的。
所以HTML这里你先改成这样：
<div class="zong">
<div id="a01">01</div>
<div id="a02">02</div>
<div id="a03">03</div>
</div>
--------------------
对应的css也要改一下：
然后统一向一个方向浮动就可以了。

#a01 { width:100px; height:20px; border:1px solid #003399; float:left; }
#a02 { width:100px; height:20px; border:1px solid #003399; float:left; }
#a03{ width:100px; height:20px; border:1px solid #003399; float:left; }

像上面css都一样的，你完全可以简写：

#a01, #a02, #a03 { width:100px; height:20px; border:1px solid #003399; float:left; }2011-01-10
如何控制css让三个标签横排显示或者三个以上的标签横排，其实都是一样的，下面演示一下，通过控制li标签实现横排显示；
1、打开所需测试的软件，创建一个新的html

2、写入要实现效果的代码：

3、利用css来控制横排展示；

4、展示的效果为：

详解css：主要是控制li标签的靠左浮动：float:left；当然，展示在一排，靠右浮动也是可以的，list-style-type:none; 意思是：去除图2展示的前面的点；至于margi-right:20px；让li标签与右侧外边距离为20px
2015-09-12
只是横排的话，不要写那么多css也可以的。直接让div float:left就行了。
假如不需要让右边的那个特别一点的话，也可以去掉right的标签。你懂的吧
<div class="zong">
<div id="left">
<div >01</div>
<div >01</div>
</div>
<div id="right">
<div id="02">02</div></div>
</div>

<style>
<!--
.zong{
width:320px;
height:22px;
border:2px solid #FF0000;
}
div{border:1px solid #003399;}
#left div{
float:left;
width:100px;
height:20px;}
#right{
width:100px;
height:20px;
float:right;}

-->
</style>2011-01-10
方案一：
<body>
<div class="zong">
<ul>
<li id="01">01</li>
<li id="01">01</li>
<li id="02">02</li>
</ul>
</div>

增加
li {
list-style-type: none;
}

方案二：
<body>
<div class="zong">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="01">01</td>
<td id="01">01</td>
<td id="02">02</td>
</tr>
</table>
</div>

方案三：给#01、#02、#03的样式加一个float:left;这个方法必须是<div class="zong">这个标签宽度固定才不会出现问题，如果分辨率或窗口缩小的时候可能出现问题2011-01-10
宽度容许的话，就在css样式里加入
{float:left}2011-01-10
mengvlog 阅读 10 次 更新于 2025-07-19 22:18:06 我来答关注问题0
5 个回答檬味博客专题活动
  • 好学者百科 一行显示3个<li>的CSS怎么写?

    1、利用Dreamweaver新建一个html页面。2、在body里面输入代码 你好 小鱼 小小 。3、默认的样式是这样的。4、编辑li标签的css样式。5、float:left代表的是元素左对齐。这样li标签就可以横排显示了，list-style:none用来去除li标签前面的小圆点。

  • 深空见闻 我是新手,想在css中实现无序列表的横排。谢了!

    } 此外，你也可以将CSS直接嵌入到HTML的title标签下，这样也能达到同样的效果。例如：这两种方法都可以实现无序列表的横排显示。横排显示的效果主要是通过CSS中的float:left属性实现的。同时，我们通过设置每个列表项的宽度和高度，以及行高，来确保每个列表项能够整齐地排列在一起。值得注意的是，为了确保...

  • 三思野话 一行内怎么显示3个div层呢?

    1.语法：float : none | left |right 2.参数：none : 对象不浮动 left : 对象浮在左边 right : 对象浮在右边 3.实例：例如有3个div块，其id属性分别为div1、div2、div3，则可以将3个div块的float属性均设为left，就可以依次做横行排列了。CSS部分：.divstyle{width:100px; height:200...

  • BetterOnE_Life 三个div横排的问题

    左边的div 中间的div 右边的div (在这里 加一个清除浮动) CSS：zhong { height: auto;width: 1000px;/*margin-right: auto;margin-left: auto;overflow: hidden;*/ （可以简写为：）margin:0 auto;margin-top: 5px;} left { float: left;height: 300px;width: 330px;} center { float...

  • 猪八戒网 怎样在网站上添加横向菜单?

    1、a标签既可以当作链接符号来用，本身也是行内标签的一种，直接用a标签输入文字，可以直接在横排显示。2、可以做出如图所示效果，横排显示的导航。3、如果想要对整体的导航进行移动位置，可以对整个的a标签添加上一个大的盒子div，这样对整体div的移动就可以了。4、如图，对div添加居中，添加个描边就...

其他CSS类似问题

檬味博客在线解答立即免费咨询

CSS相关话题

Copyright © 2023 WWW.MENGVLOG.COM - 檬味博客
返回顶部