Question

我在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 Electronics-I

MT-111微积分

CY-105应用化学

PH-121应用物理学

HS-105巴基斯坦研究| HS-127巴基斯坦研究（外国人）

请帮忙让所有列表元素看起来一样。感谢

Answer 1

文本确实有常规空格。问题是您使用的字体不是固定宽度，课程类型/数字的长度会将其丢弃。

使用表格来表示类似的东西。

Answer 2

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

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/

Answer 3

布拉德关于使用非单字体字体时间距不一致的反馈是正确的（并且html中没有\t符号用于制表），但在这里使用definition list可能更合适应用了一些造型。

语义非常合适（术语名称 dt后跟 description dd）：

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

Fiddled

Answer 4

如果我理解正确的话，您需要选择等宽字体，以便它们看起来一样。

html中不寻常的空格

4 个答案: