请教CSS达人,怎样在li中设置两个span标记左右浮动?

作者&投稿:威勤 (若有异议请与网页底部的电邮联系)
css 控制li浮动~

放对位置就行了

li{
float:left;
list-style-type:none;
width:100px;
margin:1px;
background-color:silver;
}
.b{
display:none;
}
.bb:hover .b{
display:block;
}


1

11
12


2

任何标签都可以浮动,span是一个行内元素,行内元素浮动了就变成块级元素了,可以设置宽高等等了。
虽然变成块级元素,可是和普通块级元素有一点点不一样,普通块级元素的宽度是自动撑满父元素的宽度的,浮动的块级元素如果不设置宽度,它的默认宽度就是它里面包含内容的宽度。

两种方法,一个是右浮的写在前面,定义右浮动

另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
.top{
width:400px;border:1px solid gray;line-height:2em;
}
.left{
float:left;
display:inline;
}
.right{
float:right;
display:inline;
}
</style>
</HEAD>

<BODY>
右浮动:<div class="top"><span class="right">右边内容写在左边</span><span >左边内容写在右边</span></div>
左右浮动:<div class="top"><span class="left">左边内容写在左边</span><span class="right">右边内容写在右边</span></div>
</BODY>
</HTML>


CSS+DIV布局,如何让多个DIV水平放置?
先放上我的外部CSS文件代码: body{ margin:0px; \/*外边距为0*\/ padding:0px; \/*内边距为0*\/ font:12px Arial,宋体; text-align:center; \/*在IE里页面居中*\/ } #Container{ \/*容器*\/ margin-left:auto; \/*让其居中显示*\/ margin-rig... 展开 匿名...

div+css如何做页面的一行两列布局
width:400px; border:1px solid #f00; height:400px; float:left; } 我是左边的 我是右边的 本回答由电脑网络分类达人 吕明推荐 举报| 答案纠错 | 评论 0 1 回忆526 采纳率:87% 擅长: 电脑\/网络 互联网 电脑装机\/选购 其他回答 感觉很乱……实现你说的效果……如果是居中版式,首先要有...

table的css 如何让table中每一列紧紧相连
table的css 让table中每一列紧紧相连,可以通过table的一些属性来实现的,如cellpadding,cellspacing,都设置成0,这样就去掉了表格之间的间隙,border就是table的一个边框,举个小例子: UUIDUserGroupUserNamePassword 1membersLinda13579 2Jane24680 3Mike157921 ...

html css写代码的时候 怎么缩进 合适?
phpstorm中写代码可以设定4个字符的缩进,或者2个字符缩进。 本回答由电脑网络分类达人 董辉推荐 举报| 答案纠错 | 评论 0 1 hnszyin 采纳率:41% 擅长: 电脑\/网络 其他回答 写好后可以找个 格式工具排下 个人感觉还是自己平时保养习惯 代码最好开始结束 缩进对齐 还有注释比如 追问 由于代码量...

如何用CSS禁止chrome的图片拖动
这个例子可以禁止拖动图片,你试试看 本回答由电脑网络分类达人 郭强推荐 举报| 答案纠错 | 评论 8 10 834464330 采纳率:63% 来自团队:ps软件 擅长: 暂未定制 其他回答 尝试给图片添加一个属性:draggable="false" 追问 webkit上能用,谢了,FF不能用啊,IE还没试,有啥在FF下禁止拖动的办法不 dj...

css代码BACKGROUND: none transparent scroll repeat 0% 0%是什么意 ...
css中background可以设置如下属性: background-color 规定要使用的背景颜色。 background-position 规定背景图像的位置。 background-size 规定背景图片的尺寸。 background-repeat 规定如何重复背景图像。 background-origin 规定背景图片的定位区域。 background-clip 规定背景的绘制区域。 background-attachment 规定背景图...

CSS关于a(超链接)有哪些属性?
实际上我们用到的这种伪类应当称之为“锚伪类”,它规定了链接不同状态下的效果。 本回答由电脑网络分类达人 董辉推荐 举报| 答案纠错 | 评论 0 4 其他回答 有一下4个 a:link 访问链接的样式a:hover 鼠标放到链接上的样式a:active 点击状态下的链接样式a:visited 点击后的链接样式 热心网友| 发布于2013-...

如何用DIV+CSS制作表格
如下几点建议:1)DIV+CSS是用来替换表格排版的,表格还是用table。2)可以尝试用ul li 做简单的表格 3)用DIV+CSS做表格的方法和做页面布局的方法一致,所以你要学习一下这方面,可以参考一下相关视频教程。如果做复杂的表格因为需要反复嵌套效果就不好了。

CSS样式:竖直方向的两个元素的margin会重合吗?
本回答由电脑网络分类达人 孟男男推荐 举报| 答案纠错 | 评论 3 0 1个人在路上zou 采纳率:72% 来自团队:电脑网络行家 擅长: 暂未定制 其他回答 对 垂直方向的margin重叠我们一般称叫下沉也就是合并 以大的margin为准还有就是水平方向的叠加 比如div1 margin-right:20px; div2 margin-left:20px那么div...

css样式内联式,外联式,嵌入式的格式是什么?
本回答由电脑网络分类达人 董辉推荐 举报| 答案纠错 | 评论(6) 144 45 superegoliu 采纳率:33% 擅长: 电脑\/网络 互联网 笔记本电脑 资源共享 其他回答 CSS 全称级联样式表 (Cascading Style Sheets),在实际应用中,一般有以下三种级联方式。1. 外联式(应用于多个网页)外联式样式表中,CSS 代码作为文件单独存...

华阴市13116437166: 请教CSS达人,怎样在li中设置两个span标记左右浮动? -
廖蕊如乐: 两种方法,一个是右浮的写在前面,定义右浮动 另一个是按顺序写,左边的定义左浮动,右边的定义右浮动,但这样外盒的高度要给定一下,要不容易出问题<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <...

华阴市13116437166: 如何通过css设置2个li重叠在一起 -
廖蕊如乐: 可以使用定位将两个li重叠在一起,这应该是最好的办法了.再看看别人怎么说的.

华阴市13116437166: css如何用ul li 排成两行两列 并且第二行合并 -
廖蕊如乐: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html...

华阴市13116437166: css3 如何让ul里分成2块 -
廖蕊如乐: 玩代码也有些年头了,这个新方式还真不听过.一般是在li在后台都是循环输出,在输出的时候就定义好单数或双数的不同样式.但这样排列还不如在li写入二个span标签分别来装单数css左浮动和双数css右浮动.这样比用css来控制li浮动会更好些.个人意见.

华阴市13116437166: 如何把两个LI并排成水平,要在CSS里控制 -
廖蕊如乐: 具体如下: ul{float:left; width:450px;height:auto;border:1px solid #000; } li{float:left; border:1px solid #000;} -->12... ...N

华阴市13116437166: 在CSS样式中,怎样设置两个按钮的距离 -
廖蕊如乐: 在CSS样式中,设置两个按钮的距离 块元素的之间的间距使用margin属性设置. CSS margin 属性 定义和用法 margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度...

华阴市13116437166: 怎么通过CSS来修改UL里LI之间的行间距呢? -
廖蕊如乐: 使用css语句:line-height 通过设置不同的zhidaoline-height值得到不同间距. 代码: 效果:扩展专资料: line-height的可以设置三种方式:像属素,百分比,数值. 参考资料:w3school--line-height

华阴市13116437166: 小白问题 :CSS 里如何让一列数据分两列显示 如图,下面延伸到外面去了,如何让它在右边另起一行
廖蕊如乐: 在确保ul所在div能够占下两列li的情况下,给ul里面的每个li应该设置float属性,最好再设置其宽度;例: <body> <div style="width:400px; height:100px; border:#FF0000 thin solid"> <ul> <li style="float:left; width:160px; margin-right:20px; "> ...

华阴市13116437166: 如何用css设置两个背景 -
廖蕊如乐: css3可以实现,background: url(image_1.jpg) top left no-repeat, url(image_2.jpg) top right no-repeat;在这个zhidao背景里面加两个div; 样式回为都float:left:width:50%;height:100%; 然后把图片分别放到两个中,答(最常用)

华阴市13116437166: css 同一个div 怎样做两种字体 -
廖蕊如乐: 可以再<li><p id=xx样式>内容</p></li> 或者li><h# id=xx样式>内容<h#></li> 3楼的说法也行 是大众形式的比较好 footer li{}定义一颜色~~ { .footer li span{}定义一种 内联与否并不影响颜色的设置的~ <font>标签的话不符合样式与结构分离的原则~ }顶一下 我说的这2种只是建议一下 最好用3楼的那个 这样别人也容易看懂

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网