Html 正确对齐CSS跨距

我的网页中有一个非常简单的外观问题

首先，这里是我的HTML和CSS片段：

。中间侧p span.2{
边距：0.0em 0.1em；
}
.中间侧p跨度8{
利润率：0.56%0.0；
}
.中间侧p跨度7{
利润率：0.46%0.0；
}
.中间侧p跨度6{
利润率：0.36%0.0；
}
.中间侧p跨度5{
利润率：0.37%0.0；
}
.中间侧p跨度3{
利润率：0.24%0.0；
}
.中间侧p跨度2{
利润率：0.14%0.0；
}
.中间侧p跨度1{
利润率：0.32%0.0；
}

特征：
楼层：{{listing.Floor}

价格：{{listing.Price}}

绘图区域：{{listing.size}

房间数：{{listing.rooms}}

电梯：{{listing.lifter}

空调：{{列表.空调}

翻新：{{listing.refresented}

阳台：{{listing.price}}

您可以为“立即”类的第一个跨距子级定义宽度，如下所示：

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

---

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

<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>  

楼层：
第五
价格：
150,000€
绘图区域：
西班牙马德里
房间数量：
7.
电梯：
对
空调：
不
翻新：
对
阳台：
对

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

编辑：虽然另一种解决方案是正确的，但我总是使用一个表格来处理这类事情

你可以这样做

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

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

---

如果要保留现有的结构，正确的方法是使用属性的各种表模型值。要将

div.middle

视为表格，将

p

元素视为行，将其内部的

span

元素视为单元格，可以执行以下操作：

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

---

参阅

< P>您可能想考虑使用.< /P> HTML

只需将冒号包装在

span

中，因此它不是一个，这意味着它不可设置样式或选择

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;
}

上述代码产生了这种响应性布局：

---

您可以使用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>

.两跨{
右侧填充：5px；
}
特征：
地板
: 
{{listing.floor}
价格
: 
{{listing.price}}
地块面积
: 
{{listing.size}
房间数
: 
{{listing.rooms}}
电梯
: 
{{listing.lifter}
空调
: 
{{列表.空调}
翻新
: 
{{listing.renoved}
二楼
: 
{{listing.price}}

---

这将节省大量时间。当你走的时候

，我将使用一个表来实现这一点，而不是使用跨度。请在前面检查我的示例。我认为使用表格总是比跨度更好的方法。请更正你的密码。字体标签必须在TD标签结束之前关闭：）@Baro，是的，你说得对。是我的错。好的代码总是更好：）不要吹毛求疵，但事实上。@iamnotmaynard，我知道，但我想避免使用CSS。您可以在

td

元素本身上使用

style

属性。添加更多宽度。我已经设置为35%，但这个值你必须改变你的元素和字体大小。非常感谢！你的解决方案救了我，而且是最容易实现的。显然，我接受了你的答案并投了赞成票：）@我很高兴帮助你：）