3

我在 html 中使用空格字符在我的文本中给出常规空格，但有趣的是，有些文本仍然没有常规空格。请看一看，

<ul style="margin-left:40px;background-color:#6CF ;padding-left:20px;padding-right:10px;padding-top:10px;padding-bottom:10px; font-size:12px;" >
<li>CS-103  &nbsp;&nbsp; Programming Languages</li>
<li>EL-133  &nbsp;&nbsp; Electronics-I</li>
<li>MT-111  &nbsp;&nbsp; Calculus</li>
<li>CY-105  &nbsp;&nbsp; Applied Chemistry</li>
<li>PH-121  &nbsp;&nbsp; Applied Physics</li>
<li>HS-105  &nbsp;&nbsp; Pakistan Studies | HS-127 Pakistan Studies(for Foreigners)</li>
</ul>

这是它的外观，

  • CS-103 编程语言
  • EL-133 电子产品-I
  • MT-111 微积分
  • CY-105 应用化学
  • PH-121 应用物理学
  • HS-105 巴基斯坦研究 | HS-127 巴基斯坦研究（外国人）

    • 请帮助使所有列表元素看起来相同。谢谢

    4

    4 回答 4

    7

    文本确实有常规空格。问题是您使用的字体不是固定宽度，并且课程类型/编号的长度会使其脱落。

    用一张桌子来做这样的事情。

    于 2012-10-03T13:20:56.473 回答
    4

    根据其语义值，您还可以使用定义列表。

    HTML：

    <dl>
    <dt>CS-103</dt>
        <dd>Programming Languages</dd>
    <dt>EL-133</dt>
        <dd>Electronics-I</dd>
    <dt>MT-111</dt>
        <dd>Calculus</dd>
    <dt>CY-105</dt>
        <dd>Applied Chemistry</dd>
    <dt>PH-121</dt>
        <dd>Applied Physics</dd>
    <dt>HS-105</dt>
        <dd>Pakistan Studies | HS-127 Pakistan Studies (for Foreigners)</dd>
</dl>​

    CSS：

    dl {
    overflow: hidden;
    }

dt {
    float: left;
    width: 80px
    }

    http://jsfiddle.net/SVdTt/

    于 2012-10-03T13:39:26.390 回答
    3

    Brad 关于使用非单一字体时间距不一致的反馈是正确的（并且\t在 html 中没有用于制表的符号），但是在此处使用定义列表并应用一些样式可能更合适。

    语义完美契合（术语名称 dt后跟其描述 dd）：

    <dl>
  <dt>CS-103</dt><dd>Programming Languages</dd>
  <dt>EL-133</dt><dd>Electronics-I</dd>
  ...
</dl>​

    摆弄

    于 2012-10-03T13:40:32.337 回答
    2

    如果我理解正确，您将需要为它们选择等宽字体以使其看起来相同。

    于 2012-10-03T13:20:31.870 回答