正确对齐CSS跨度
伊多斯
我的网页中有一个非常简单的问题。
首先，这是我的HTML和CSS片段：
.middle-side p span.two {
margin: 0 0em 0 1em;
}
.middle-side p span.bath8 {
margin: 0 56% 0 0;
}
.middle-side p span.bath7 {
margin: 0 46% 0 0;
}
.middle-side p span.bath6 {
margin: 0 36% 0 0;
}
.middle-side p span.bath5 {
margin: 0 37% 0 0;
}
.middle-side p span.bath3 {
margin: 0 24% 0 0;
}
.middle-side p span.bath2 {
margin: 0 14% 0 0;
}
.middle-side p span.bath1 {
margin: 0 32% 0 0;
}<div class="col-sm-4 middle-side immediate">
<h4>Features:</h4>
<p><span class="bath1">Floor</span>:<span class="two"> {{listing.floor}}</span></p>
<p><span class="bath2">Price</span>:<span class="two"> {{listing.price}}</span></p>
<p><span class="bath3">Plot Area</span>:<span class="two"> {{listing.size}}</span></p>
<p><span class="bath4">Number of rooms</span>:<span class="two"> {{listing.rooms}}</span></p>
<p><span class="bath5">Elevator</span>:<span class="two"> {{listing.elevator}}</span></p>
<p><span class="bath6">Air Conditioned</span>:<span class="two"> {{listing.airConditioning}}</span></p>
<p><span class="bath7">Renovated</span>:<span class="two"> {{listing.renovated}}</span></p>
<p><span class="bath8">Balcony</span>:<span class="two"> {{listing.price}}</span></p>
</div>这样产生：
我希望它正确对齐，像这样：
我该如何实现？
巴罗
您可以像这样为“立即”类的第一个跨度子级定义宽度：
.immediate p span:first-child{
display:inline-block;
width:35%;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
跨度在Firefox上未正确对齐
- 2
自动中断跨度并保持正确对齐
- 3
如何正确对齐跨度和输入元素？
- 4
如何正确对齐标签和跨度
- 5
显示：内联块，跨度未正确对齐
- 6
避免跨度浮动右对齐与文本（CSS）
- 7
文本之间的 CSS 跨度 - 适合宽度/对齐
- 8
无法使div与CSS正确对齐
- 9
CSS菜单未正确对齐
- 10
什么是对齐图像的正确CSS？
- 11
CSS 布局未正确对齐
- 12
将标签与同一行上的跨度对齐-CSS
- 13
CSS垂直对齐按钮在跨度动态高度内
- 14
CSS：如何在跨度内的图像旁边对齐文本？
- 15
在CSS中对齐跨度，段落和锚点
- 16
使用CSS在div内分别对齐跨度
- 17
CSS 中间对齐两个跨度到图像的右侧
- 18
css ul和li-每个li中的多个跨度以及如何垂直对齐跨度
- 19
CSS：如何在响应式图像的右侧垂直对齐跨度中的文本（也在跨度中）
- 20
使用跨度，文本对齐和内联块，CSS，HTML将文本左，中，右对齐
- 21
在div内对齐跨度
- 22
跨度内对齐
- 23
对齐内容：在跨度之前
- 24
并排对齐跨度元素
- 25
如何使跨度文本对齐
- 26
在跨度中对齐文本
- 27
CSS div对齐不正确
- 28
HTML / CSS表页脚未正确对齐
- 29
如何修复CSS div不能正确对齐
我来说两句