跨度有边距和填充
列昂纳多
我需要彼此相邻放置两个跨度，以在图片中获得效果。
<li class="hello">
<a href="#">
<span>Hello</span> <span class="numbers">20</span>
</a>
</li>
由于span不能有边距，宽度或填充，因此我使用了内联块：
li {
height: 46px;
text-align: center;
float: left
}
li a {
color: white;
display: inline-block;
font-size: 15px;
line-height: 44px;
padding: 0 24px;
}
.numbers {
display: inline-block;
margin-left: 6px;
padding: 4px 6px 4px 6px;
height: 18px;
background:#A9A9A9
}
但是，这会将“ Hello”和“ 20”文本都向下推一点，灰色背景将被推到顶部（如下所示）。
如何获得第一个图像中所述的效果？
编辑：我还为lianda和Demo包括了相关的CSS
丹尼
这里的问题是你有一个值的line-height的44px。有了这个height值，numbers您会得到一个简短的背景和偏移文本。您将需要再次设置等于其高度的跨度值：
.numbers {
display: inline-block;
margin-left: 6px;
height:18px;
line-height:18px; /*ADD THIS*/
padding: 4px 6px 4px 6px;
background:#A9A9A9
}
li {
height: 46px;
text-align: center;
float: left
}
li a {
color: white;
display: inline-block;
font-size: 15px;
line-height: 44px;
padding: 0 24px;
background:aqua;
text-decoration:none;
}
.numbers {
display: inline-block;
margin-left: 6px;
height:18px;
line-height:18px;
padding: 4px 6px 4px 6px;
background:#A9A9A9
}<li class="hello">
<a href="#">
<span>Hello</span> <span class="numbers">20</span>
</a>
</li>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
CSS-元素之间的边距没有边距/填充？
- 2
为什么绝对定位的孩子和有边界的父母之间会有很小的差距？所有边距，填充和位置都设置为0
- 3
顶部和底部有边距的裁剪图像
- 4
具有边框和边距问题的CSS
- 5
使用没有边距的QWebEngine
- 6
Android的scrollview有边距？
- 7
卡片带有边距右侧
- 8
多个div带有边距以填充父级宽度
- 9
100％高度Div，带有边距或填充滚动条问题
- 10
为什么第二个微调器没有边距/填充
- 11
表（td）的单元格忽略跨度和标签的顶部/底部边距/填充
- 12
导航栏上的填充使其从页面溢出，带有边距/填充的内部容器也不起作用
- 13
CSS Grid布局，其等宽部分的列和带有边框/边距的部分
- 14
带有边距和响应能力的在Bootstrap中浮动图像的最佳方法？
- 15
带有边距和layout_gravity的Android TableLayout问题
- 16
为什么导航栏和横幅之间有边距？
- 17
iOS Tableview设计具有边距和间距的块状单元格
- 18
在iPhone iPhone 6 plus中，全角组件的左侧和右侧都有边距
- 19
填充，边距和变换值是否有限制？
- 20
CSS边距和填充之间有什么区别？
- 21
如何在本机JavaScript中获取带有边距，填充，边框的元素宽度/高度（无jQuery）
- 22
将div水平居中并留有边距（CSS）
- 23
使div全尺寸窗口，没有边距
- 24
带有边距的分组WPF ListView样式问题
- 25
Android相对布局中心垂直有边距
- 26
带有边距的引导选项卡
- 27
Flexbox带有边距对齐问题
- 28
设置Div宽度100％但有边距
- 29
Material-UI应用栏带有边距
我来说两句