Question

我有一天我无法想到在Google上搜索的正确措辞，我尝试了很多东西。当我找到答案时，我会打自己的......

你会看到当你在下面运行我的代码时，每行的最后一个“pm”不是水平的。如何让每个开放/结束时间相互之间达到水平？

<ul style="list-style-type: none;">
  <li>Mon 7am - 7pm</li>
  <li>Tue 7am - 7pm</li>
  <li>Wed 7am - 7pm</li>
  <li>Thu 7am - 7pm</li>
  <li>Fri 7am - 7pm</li>
  <li>Sat 7am - 7pm</li>
  <li>Sun - Closed</li>
</ul>

我为新手问题道歉。

Answer 1

好的，为了好玩，另一种方式是//code for ng-table in html <ng-table (tableChanged)="onChangeTable(config)" (cellClicked)="onCellClick($event)" [rows]="rows" [columns]="columns"> </ng-table> //to create checkbox I am adding html in component where filling the data. data.forEach((item: any) => {item.CheckBox = '<input type="checkbox"></input>'; //cell click event in table component is getting triggered public onCellClick(data: any): any { this event is getting triggered .... }黑魔法。您可以使用attr()或其他任何结果都相同。您只需要一个固定宽度span元素。

浏览器支持from IE8，因此即使在Windows XP SP1中，您也可以将时间对齐。

inline-block

li::before{
  content: attr(data-day);
  display: inline-block;
  width: 40px;
  color: #888;
}

[data-day=Sun]{
  color: red;
}

Answer 2

您可以简单地使用等宽字体：

＆＃13;

ul {
  list-style-type: none;
  font-family: monospace;
}

＆＃13;

<ul>
  <li>Mon 7am - 7pm</li>
  <li>Tue 7am - 7pm</li>
  <li>Wed 7am - 7pm</li>
  <li>Thu 7am - 7pm</li>
  <li>Fri 7am - 7pm</li>
  <li>Sat 7am - 7pm</li>
  <li>Sun - Closed</li>
</ul>

＆＃13;

或者您可以将项目对齐：

＆＃13;

ul {
  list-style-type: none;
}

li {
  text-align: right;
  width: 120px;
}

＆＃13;

<ul>
  <li>Mon 7am - 7pm</li>
  <li>Tue 7am - 7pm</li>
  <li>Wed 7am - 7pm</li>
  <li>Thu 7am - 7pm</li>
  <li>Fri 7am - 7pm</li>
  <li>Sat 7am - 7pm</li>
  <li>Sun - Closed</li>
</ul>

＆＃13;

尽量避免使用内联样式，因为它们被认为是不好的做法。

Answer 3

两个简单的答案：

文字对齐

＆＃13;

<ul style="list-style-type: none; text-align: right;">
    <li>Mon 7am - 7pm</li>	
    <li>Tue 7am - 7pm</li>	
    <li>Wed 7am - 7pm</li>	
    <li>Thu 7am - 7pm</li>	
    <li>Fri 7am - 7pm</li>	
    <li>Sat 7am - 7pm</li>	
    <li>Sun - Closed</li>	             
</ul>

＆＃13;

字体

＆＃13;

<ul style="list-style-type: none; font-family: monospace;">
    <li>Mon 7am - 7pm</li>	
    <li>Tue 7am - 7pm</li>	
    <li>Wed 7am - 7pm</li>	
    <li>Thu 7am - 7pm</li>	
    <li>Fri 7am - 7pm</li>	
    <li>Sat 7am - 7pm</li>	
    <li>Sun - Closed</li>	             
</ul>

＆＃13;

如何使列表的部分级别

3 个答案:

文字对齐

字体