如何使列表

我做點運動，我必須複製this 如何使列表

我有一些麻煩，像他那樣對準子彈對準要點。我的問題是，我的內容是對齊bot而不是子彈。

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

來源

2017-05-26 Victor Feitosa

請提供一個完整的工作示例。你可以使用http://jsfiddle.net（或者在stackoverflow中使用snippets）。 – Dekel

添加小提琴。謝謝 –

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

來源

2017-05-26 15:50:09 Dekel

它沒有在列的中心對齊 –

您提供的圖像沒有對齊。請注意，如果您想對齊它，您需要設置容器的寬度，並將該容器與中心對齊（而不是文本）。 – Dekel

檢查我的回答中的更新 – Dekel

Here是你更新的代碼

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

 
} 
 

 
ul{ 
 
\t padding-left: 0; 
 
} 
 

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

<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> 
 
\t \t \t <ul> 
 
\t \t \t \t <li>Celery Root</li> 
 
\t \t \t \t <li>Spaghetti Squash</li> 
 
\t \t \t \t <li>Killer Mushrooms</li> 
 
\t \t \t </ul> 
 
       </div> 
 
       <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"><h1>Wild & Wacky Vegetables</h1> 
 
\t \t \t <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> 
 
\t \t \t <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? 
 
\t \t \t 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>

來源

2017-05-26 16:00:05

刪除類從UL標籤文本的中心，並嘗試直接改變UL標籤或者使用這種風格的另一個班級。

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

這裏舉例：https://jsfiddle.net/lavdimxhelii/p93ccj07/

來源

2017-05-26 16:10:42 LXhelili

回答

相關問題