正确对齐 CSS 跨度

Question

我的网页有一个非常 simple-looking 的问题。

首先，这是我的 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>

这产生：

我希望它正确对齐，如下所示：

我怎样才能做到这一点？

Answer 1

您可以像这样为 "immediate" class 的第一个跨度子项定义宽度：

.immediate p span:first-child{
  display:inline-block;
  width:35%;
}

This is the example in JSFiddle

Answer 2

代码看起来像这样。根据您的需要进行调整：

<div class="box1">
    <table width="100%" border="0" cellpadding="3" cellspacing="0"onMouseover="changeto(event, '#D0DFEC')" onMouseout="changeback(event, '#ffffff')"width="100%">
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Floor:</strong></td>
            <td><font color="0075DB">5th</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Price:</strong></td>
            <td><font color="0075DB">150,000€</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Plot Area:</strong></td>
            <td><font color="0075DB">Madrid, Spain</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Number of rooms:</strong></td>
            <td><font color="0075DB">7</font></td>

        </tr>
        <tr  style="border-bottom: 1px dotted silver;">
            <td><strong>Elevator:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Air Conditioned:</strong></td>
            <td><font color="0075DB">No</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Renovated:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>
        <tr style="border-bottom: 1px dotted silver;">
            <td><strong>Balcony:</strong></td>
            <td><font color="0075DB">Yes</font></td>

        </tr>

    </table>
</div>

我添加了一些鼠标点击事件让它看起来更漂亮，还要确保如果你使用 bootstrap，你确实满足所有关于列的 bootstrap 要求。（封装 div 包含一行中的列等）

This is the example in JSFiddle

编辑：虽然其他解决方案是正确的，但我总是使用 table 来处理这种事情

Answer 3

你可以这样做...

.middle-side p span:first-child {
  display: inline-block;
  width: 20%;
}

.middle-side p span.two {
  padding-left: 1em;
}

http://jsfiddle.net/jonathanzuniga/y3xcg646/

Answer 4

如果您想保留现有的结构，正确的方法是使用 display 属性的各种 table 模型值。要将 div.middle-side 视为 table，将 p 元素视为行，并将其中的 span 元素视为单元格，您可以执行以下操作：

.middle-side {
     display: table;
}
.middle-side p {
    display: table-row;
}
.middle-side p span {
    display: table-cell;
}

参见this fiddle。

Answer 5

您可能需要考虑使用 flexbox。

HTML

只需将冒号括在 span 中，因此它不是 anonymous element，这意味着它无法设置样式或选择。

CSS

将您的代码替换为：

.col-sm-4 {
    display: flex;
    flex-direction: column;
}

.col-sm-4 > p {
    display: flex;
    border: 1px solid black;
}

.col-sm-4 > p > span:nth-child(1) {
    flex: 0 0 20%;
    background-color: aqua;
}

.col-sm-4 > p > span:nth-child(2) {
    flex: none;
    background-color: pink;
}

.col-sm-4 > p > span:nth-child(3) {
    flex: 1;
    background-color: yellow;
}

上面的代码产生了这个响应式布局：

DEMO

Answer 6

您可以使用您正在使用的 css 框架来实现此目的：

<style type="text/css" media="screen">

.two span{
    padding-right:5px;
}
</style>

<div class="row">
<div class="col-sm-4 middle-side immediate">
    <h4>Features:</h4>

    <div class="row">
        <div class="bath1 col-sm-6">Floor</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.floor}}
        </div>
    </div>

    <div class="row">
        <div class="bath2 col-sm-6">Price</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.price}}
        </div>
    </div>

    <div class="row">
        <div class="bath3 col-sm-6">Plot Area</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.size}}
        </div>
    </div>

    <div class="row">
        <div class="bath4 col-sm-6">Number of rooms</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.rooms}}
        </div>
    </div>

    <div class="row">
        <div class="bath5 col-sm-6">Elevator</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.elevator}}
        </div>
    </div>

    <div class="row">
        <div class="bath6 col-sm-6">Air Conditioned</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.airConditioning}}
        </div>
    </div>

    <div class="row">
        <div class="bath7 col-sm-6">Renovated</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.renovated}}
        </div>
    </div>

    <div class="row">
        <div class="bath8 col-sm-6">Balcony</div>
        <div class="two col-sm-6"> 
        <span>:</span> 
            {{listing.price}}
        </div>
    </div>
</div>  
</div>

这会节省很多时间。响应时。

正确对齐 CSS 跨度

Aligning CSS spans correctly

html

css

text

alignment