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 のフィードバックは正しい (そして、html での集計に使用する記号はありません) が、ここでいくつかのスタイリングを適用した定義リスト\tを使用する方が適切な場合があります。

    セマンティクスは完全に適合します (用語名 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 に答える