如何在项目列表中对齐项目符号

时间:2017-05-26 15:42:50

标签: html5 twitter-bootstrap css3 twitter-bootstrap-3

我正在做一些小练习,我必须复制this

我很难像他那样对齐子弹。我的问题是我的内容与机器人对齐而不是子弹。

Here it is

我的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;
}

3 个答案:

答案 0 :(得分:1)

您需要删除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/

答案 1 :(得分:1)

Here是您的更新代码

&#13;
&#13;
#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;
}
&#13;
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="container-fluid">
            <div class="row">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" id="left-box">
                <h3 class="text-center">Some Favorites</h3>
			<ul>
				<li>Celery Root</li>
				<li>Spaghetti Squash</li>
				<li>Killer Mushrooms</li>
			</ul>
                </div>
                <div class="col-xs-9 col-sm-9 col-md-9 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>
&#13;
&#13;
&#13;

答案 2 :(得分:1)

从ul标记中删除类文本中心,并尝试直接更改ul标记或使用此样式的其他类。

ul {
  display: table;
  margin: 0 auto;
}

此处示例:https://jsfiddle.net/lavdimxhelii/p93ccj07/