Question

我并排有两列文字。一个是右对齐，另一个是左对齐。

这是我到目前为止所拥有的：

.alignleft {
  float: left;
}

.alignright {
  float: right;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

<ul class="store-opening-hours list-unstyled">
  <li>
    <div style="text-align:left;">
      Monday

      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Tuesday
      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Wednesday
      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Thursday
      <span style="float:right;">8:30 AM - 11:00 AM</span>
    </div>
  </li>
  <li>
    <div style="text-align:right;">
      12:30 PM - 2:00 PM
    </div>
  </li>
  <li>
    <b>
    			<div style="text-align:left;">
                Friday                
    				<span style="float:right;">9:00 AM - 2:30 PM</span>
    			</div>
    		</b>
  </li>
  <li>
    <b>
    			<div style="text-align:right;">
            6:00 PM - 9:00 PM
        </div>
    		</b>
  </li>
  <li>
    <div style="text-align:left;">
      Saturday
      <span style="float:right;">9:00 AM - 5:00 PM</span>
    </div>
  </li>
  <li></li>
  <li>
    <div style="text-align:left;">
      Sunday
      <span style="float:right;">Closed</span>
    </div>
  </li>
  <li></li>
</ul>

这是Jsfiddle链接JsFiddle link。

上面的示例是并排的，但是右对齐文本未如该图所示垂直对齐：

我该如何实现？

Answer 1

您可以改用表格

<table>
  <tr>
    <td width="200">Monday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>8:30AM - 11:00AM</td>
  </tr>
  <tr>
    <td rowspan="2"><b>Friday</b></td>
    <td><b>9:00AM - 2:30PM</b></td>
  </tr>
  <tr>
    <td><b>6:00PM - 9:00PM</b></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Closed</td>
  </tr>
</table>

工作演示

<table>
  <tr>
    <td width="200">Monday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td>8:30AM - 11:00AM</td>
  </tr>
  <tr>
    <td rowspan="2"><b>Friday</b></td>
    <td><b>9:00AM - 2:30PM</b></td>
  </tr>
  <tr>
    <td><b>6:00PM - 9:00PM</b></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td>9:00AM - 5:00PM</td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td>Closed</td>
  </tr>
</table>

Answer 2

如何使用table作为显示属性？

.list-unstyled {
  display: table;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.list-unstyled li {
  display: table-row;
}

.list-unstyled li .weekday {
  display: table-cell;
  width: 400px;
  text-align: left;
  vertical-align: middle;
}

.list-unstyled li .time {
  display: table-cell;
  width: 200px;
  text-align: left;
}

<ul class="store-opening-hours list-unstyled">
  <li>
    <div class="weekday">
      Monday</div>

    <div class="time">9:00 AM - 5:00 PM
    </div>
  </li>
  <li>
    <div class="weekday">
      Tuesday
    </div>
    <div class="time">9:00 AM - 5:00 PM
    </div>
  </li>
  <li>
    <div class="weekday">
      Wednesday
    </div>
    <div class="time">9:00 AM - 5:00 PM</div>
  </li>
  <li>
    <div class="weekday">
      Thursday
    </div>
    <div class="time">8:30 AM - 11:00 AM<br>12:30 PM - 2:00 PM</div>
  </li>
  <li>
    <div class="weekday">
      <strong>Friday</strong>
    </div>
    <div class="time">9:00 AM - 2:30 PM<br><strong>6:00 PM - 9:00 PM</strong></div>
  </li>
  <li>
    <div class="weekday">
      Saturday
    </div>
    <div class="time">9:00 AM - 5:00 PM
    </div>
  </li>
  <li>
    <div class="weekday">
      Sunday
    </div>
    <div class="time">Closed
    </div>
  </li>
</ul>

Answer 3

也许您可以通过在时间和日期中添加span类来做到这一点。这些跨度具有固定的宽度，以使文本对齐。

<ul class="store-opening-hours list-unstyled">
    <li>
        <div>
            <span class="days">Monday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days">Tuesday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days">Wednesday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days">Thursday</span>
            <span class="timings">8:30 AM - 11:00 AM</span>
        </div>
    </li>
    <li>
        <div>
            <span class="days"><br></span>
            <span class="timings">12:30 PM - 2:00 PM</span>
        </div>
    </li>
    <li>
        <b>
            <div>
                <span class="days">Friday</span>
                <span class="timings">9:00 AM - 2:30 PM</span>
            </div>
        </b>
    </li>
    <li>
        <b>
            <div>
                <span class="days"><br></span>
                <span class="timings"> 6:00 PM - 9:00 PM</span>
            </div>
        </b>
    </li>
    <li>
        <div>
            <span class="days">Saturday</span>
            <span class="timings">9:00 AM - 5:00 PM</span>
        </div>
    </li>
    <li>
        <div>

            <span class="days">Sunday</span>
            <span class="timings">Closed</span>
        </div>
    </li>
</ul>

.list-unstyled {
    padding-left: 0;
    list-style: none;
}

.days {
    width: 75%;
    float: left;
    text-align: left;
}

.timings {
    width: 25%;
    float: right;
    text-align: left;
}

Working code

CSS文字并排对齐和垂直对齐

3 个答案: