时间戳

首页 > 解决方案 > CSS文本并排对齐和垂直对齐

html - CSS文本并排对齐和垂直对齐

问题描述

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

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

.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 链接。

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

最终风格

我怎样才能做到这一点？

标签： htmlcss

解决方案

您可以改用表格

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

推荐阅读