Question

我的网页上有一个非常简单的问题。

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

＆＃13;

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

＆＃13;

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

＆＃13;

这会产生：

我想让它正确对齐，就像这样：

我怎样才能做到这一点？

Answer 1

您可以为＆＃34;立即＆＃34;的第一个跨栏儿童定义宽度。像这样的课：

.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，你确实满足关于列的所有引导要求。（封装包含列的div等等）

This is the example in JSFiddle

编辑：虽然另一个解决方案是正确的，但我总是使用表来做这件事

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属性的各种表模型值。要将div.middle-side视为表格，将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范围

6 个答案: