Question

我正在创建一个开放时间部分，我想在桌子的左侧调整我的日子。我试过了float: left;，但我的周一发送了几个像素。 text-align：left;没有用，任何人都可以提出一个正确的方法来调整我的日子吗？

http://imgur.com/93TMXIp（你可以看到我的星期一歪曲了）

CSS

 .tg  {border-collapse:collapse;border-spacing:0;}
 .tg td{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:2px 10px;overflow:hidden;word-break:normal; text-align:right;border-style: solid;border-bottom: solid #E7E7E7 1px;}
.day { float: left; }
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:2px 10px;overflow:hidden;word-break:normal; text-align:right;color:#696969;border-style: solid;border-bottom: solid #E7E7E7 1px;}
.tg .tg-57v2{background-color:#f7f7f7}

HTML

<table class="tg">
<tr>
<th class="tg-57v2"><span class="day">Monday</span></th>
<th class="tg-57v2">                           11:30am-10:00pm</th>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Tuesday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Wednesday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Thursday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Friday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Saturday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
<tr>
<td class="tg-57v2"><span class="day">Sunday</span></td>
<td class="tg-57v2">                           11:30am-10:00pm</td>
</tr>
</table>

Answer 1

星期一的样式为th（标题）。如果您像其他日子一样将其更改为td，则应该对齐。

Answer 2

可能是一种更加语义化的方法，标记更少：

dl.OpenHours {width:300px; }

dl.OpenHours>*{
    font-family:Arial, sans-serif;   
    font-size:14px;
    font-weight:normal;
    padding:2px 10px;
    overflow:hidden;
    word-break:normal;
    text-align:right;
    border-style: solid;
    border-bottom: solid #E7E7E7 1px;
    float:left;    
    margin:0;
 }

dl.OpenHours dt
{
    width:30%;
    text-align:left;
    border-right-width:2px;
}

dl.OpenHours dd
{
  width:50%;  
  border-left-width:0;
}

<dl class="OpenHours">
       <dt>Monday</dt>
       <dd>10:00am - 11:00pm</dd>
      <dt>Tuesday</dt>
       <dd>10:00am - 11:00pm</dd>
      <dt>Wednessday</dt>
       <dd>10:00am - 11:00pm</dd>
      <dt>Thursday</dt>
       <dd>10:00am - 11:00pm</dd>
      <dt>Friday</dt>
       <dd>10:00am - 11:00pm</dd>
    </dl>

如何在CSS中正确对齐左边？

2 个答案: