2

div 内の中央に配置する必要がある順序付けられていないリストがありますが、並べて表示することもできます。これを行うためtext-align: center;に、div とdisplay: inline-block;リスト項目で使用しました。ただし、これを行うと、リスト項目の間に空白が表示されます。ここにデモがあります

html

<div class="wrap">
    <ul>
      <li>hello</li>
      <li>buddy</li>
      <li>good</li>
      <li>morning</li>
    </ul>
</div>

CSS

li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
}
4

4 に答える 4

3

display: inline-block問題が発生するのは、要素間の改行がスペースとして扱われるように設定すると、要素が単語として扱われるようになったためです。

いくつかのオプションがあります。1 つは要素間の改行を削除することです: http://jsfiddle.net/26eg9/8/

または、親要素のフォント サイズを 0 に設定し、リスト項目で次のようにリセットすることもできます: http://jsfiddle.net/26eg9/3/

個人的には、HTML ドキュメントの見栄えを良くするため、2 番目の方法を好みます。

編集: 新しい行は、リスト項目内に配置することで最初のオプションに保持できますが、これはまだずさんに見えると思います

于 2013-11-11T18:37:14.083 に答える
2

インライン要素は空白を尊重します。マークアップ内の空白を文字通り削除します。

jsFiddle の例- それらの間に空白がない

更新された HTML

<div class="wrap">
    <ul>
    <li>hello</li><li>buddy</li><li>you</li><li>stink</li>
    </ul>
</div>

負のマージンを使用する (例)、または親font-sizeを 0px に設定する (例)などの代替手段があります。その後、子をリセットします。ただし、ブラウザー間でサポートされる最適なソリューションは、マークアップ内の空白を削除することです。

于 2013-11-11T18:34:54.973 に答える
0

スペースは改行から来ています - HTML は新しい行を単一の空白文字として解釈します。

これを回避するにはいくつかの方法があります-li要素にフロートを追加したり、マークアップから空白を削除したり、負のマージンなどを削除したりできますfont-size: 0。代わりに必要に応じてラップdivにそれを行うことができます）、代わりに s を明示的に設定します。ulfont-sizeli

li {
    margin: 0px;
    padding: 0px;
    display: inline-block;
    border: 1px solid green;
    font-size: 16px;
}

ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 95%;

}

div.wrap {
    width: 500px;
    border: 1px solid red;
    text-align: center;
    font-size: 0;
}

これは更新された JSFiddleです。

于 2013-11-11T18:39:05.683 に答える
-1

私は同じ問題を抱えていましたが、上記の解決策のどれもそれを修正できませんでした. しかし、これがうまくいくことがわかりました：

これの代わりに：

<ul>
    <li>hello</li>
    <li>buddy</li>
    <li>good</li>
    <li>morning</li>
</ul>

次のように HTML コードを作成します。 

<ul>
    <li> hello </li>
    <li> buddy </li>
    <li> good </li>
    <li> morning </li>
</ul>
于 2014-10-10T20:09:53.180 に答える