1. ホーム
  2. html

[解決済み] CSSでulのインデントを削除する

2022-01-28 09:57:17

質問

順番なしリストで長い行が折り返されたとき、インデントを削除できないようです。私のリストは以下のようなものです。

  • Windowsユーザはputtyを使用することができます
  • MacユーザーはTerminal.appを使用することができます
  • Linuxユーザーは、SSH [email protected] ポート22を使用できます。
  • ......>または、CyberduckのようなSFTPプログラムを使用する場合は、次の場所を指定するだけです。 ...................................................................................................

(ドットはインデントを示す)

たくさんの解決策を読み、marginとpaddingをゼロに設定し、text-indent、list-styleを使用してみましたが、何もうまくいきません。問題は、リストの上に中央揃えにする見出しがあるため、マージンを自動に設定すると、下のリストが台無しになることだと思います。しかし、親divの中に2つのdivを入れても、うまくいきません。

以下は、HTML/CSSです(他のすべての解決策を失敗させる原因となっている設定がある場合に備えて、すべてを含めています)。

<div id="info">
    <p><strong>Did you know you can SSH directly to ourserver.com?</strong> </p> 
    <ul>
        <li>Windows users can use putty</li>
        <li>Mac users can use the <a href="http://www.terminfo.org">Terminal.app</a></li>
        <li>Linux users can use SSH [email protected] port 22</li>
        <li>Or use an SFTP program like <a href="http://cyberduck.ch/">Cyberduck</a> just point it at ourserver.com, port 22</li>
    </ul>
</div>

#info {
    color:#FFFFFF;
    width:440px;
    margin-left:auto;
    margin-right:auto;
    border-radius: 10px;
    border-style:solid;
    border-width:2px;
    border-color:#FFF; 
    padding-bottom:20px; padding-left:20px; padding-right:20px;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#cccccc));
    overflow: hidden;
}
#info ul li { 
    float:left;
}

解決方法は?

このコードでは、インデントとリストの箇条書きを削除します。

ul {
    padding: 0;
    list-style-type: none;
}

http://jsfiddle.net/qeqtK/2/