1

<ul>+を使用する：http <li>： //jsfiddle.net/FsmcM/

<div>+を使用する：http <span>：//jsfiddle.net/z47LM/

？の半分を表示することは可能<li>ですか？（<div>+のように<span>）

4

5 に答える 5

3

http://jsfiddle.net/FsmcM/2/float:leftから削除しますli 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <body>
  <ul>
    <li>1234567890</li>
    <li>1234567890</li>
    <li>1234567890</li>
  </ul>
 </body>
</html>

そしてこれがfloat：leftのコメントアウトされたCSSです：

ul{
    border:1px solid blue;
    width:230px;
    overflow:hidden;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul li{
    /*float:left;*/
    border:1px solid red;
    height:20px;
    display:inline;
    word-break:break-all;
}​

IEはテキストを空白文字でのみ折り返すことに注意してください。

于 2012-05-15T06:20:43.640 に答える
2

を削除するとfloat: left;、動作するはずです。

jsFiddle .

参考までに、左にフロートする必要はありません。display:inline;

ul{
    border:1px solid blue;
    width:230px;
    overflow:hidden;
    list-style: none;
    margin: 0;a
    padding: 0;
}
ul li{
    border:1px solid red;
    height:20px;
    display:inline;
    word-break:break-all;
    word-break: break-all;
}​

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <body>
  <ul>
    <li>1234567890</li>
    <li>1234567890</li>
    <li>1234567890</li>
  </ul>
 </body>
</html>
​
于 2012-05-15T06:22:05.023 に答える
2

float: leftからプロパティを取り出すだけul liです。liただし、そうすると、各要素の間に少しスペースがあることに気付くかもしれません。これは、HTML のliタグ間にスペースが含まれているためです。

<ul>
... <li>A</li>
... <li>B</li>
</ul>
<!-- "..." denotes the spaces I'm talking about -->

これらのスペースを削除するには、次のいずれかを実行できます。

  • HTML からスペースを削除してください。もちろん、これはソース コードの読みやすさに影響します。
  • または、font-size親 ( ) の を 0 に設定します。次に、 にプロパティをul追加します。 http://jsfiddle.net/FsmcM/6/font-sizeli
于 2012-05-15T06:24:14.000 に答える
1

次の変更により、あなたdivのspan例のようになります。

html:

<ul>
    <li>1234567890</li><li>1234567890</li><li>1234567890</li>
</ul>

CSS:

ul{
    border:     1px solid blue;
    width:      210px;
    list-style: none;
    margin:     0;
    padding:    0;
}
li{
    border:  1px solid red;
    height:  20px;
    display: inline;
}

私の例も参照してください。

于 2012-05-15T06:22:49.203 に答える
1

次のように書くことができます：

ul {
    border:1px solid blue;
    width:230px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space:nowrap;
    font-size:0;
}
ul li {
    display:inline-block;
    *display:inline; /*For IE*/
    *zoom:1;
    white-space:noraml;
    font-size:16px;
    border:1px solid red;
    height:20px;
    display:inline;
    word-break:break-all;
}

これをチェックしてくださいhttp://jsfiddle.net/FsmcM/1/

于 2012-05-15T06:18:06.897 に答える