箇条書きで箇条書きにする方法

debugcn 投稿 Dev

ヴィクトル・フェイトサ

これをコピーする必要があるちょっとした練習をしています

彼のように弾丸を揃えるのに苦労しています。私の問題は、コンテンツが箇条書きではなくボットに配置されていることです。

私の HTML:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<body>
    <div class="container">
    <div class="row">
        <div class="col-lg-3" id="left-box">
            <h3 class="text-center">Some Favorites</h3>
            <ul class="text-center">
                <li>Celery Root</li>
                <li>Spaghetti Squash</li>
                <li>Killer Mushrooms</li>
            </ul>
        </div>
        <div class="col-lg-9">
            <h1>Wild & Wacky Vegetables</h1>
            <p>Normally, both your asses would be dead as fucking fried chicken, but you happen to pull this shit while I'm in a transitional period so I don't wanna kill you, I wanna help you. But I can't give you this case, it don't belong to me. Besides, I've already been through too much shit this morning over this case to hand it over to your dumb ass.</p>
            <p>My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?
            You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man.</p>
        </div>
    </div>
</div>
</body>

私のCSS :

 #left-box{
    background-color: whitesmoke;
    margin-top: 2%;
    border: 1px solid white;
    border-radius: 3px;
}

ul{
    padding-left: 0;
}

ul li{
    list-style-position: inside;
}

デケル

ul要素内のテキストの中央揃えを削除する必要があります。

        <h3 class="text-center">Some Favorites</h3>
        <ul>
            <li>Celery Root</li>
            <li>Spaghetti Squash</li>
            <li>Killer Mushrooms</li>
        </ul>

これが実際の例です:
https://jsfiddle.net/m782jg44/1/

リスト全体を揃えたい場合は、幅を設定し、コンテナー (ulテキストではなく要素)を中央に配置する必要があります。

これが実際の例です:
https://jsfiddle.net/m782jg44/2/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]