如何在響應式網站的文本段落下居中對齊兩列列表？

Question

請查看兩個屏幕截圖。 一張屏幕截圖顯示左列未居中。 第二個屏幕截圖的兩列均位於段落的下方。 我想在響應迅速的網站上實現這一目標。

• 當前結果[ https://s11.postimg.org/bcu53jhhv/current_result.jpg][1]

• 預期結果[ https://s11.postimg.org/9mb421zyr/intendend_result.jpg][2]

   <p align="center"> One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home. </p> <div style="float: left; width: 50%;"> <ul> <li><i class="fa fa-check"></i>   Item 1</li> <li><i class="fa fa-check"></i>   Item 2</li> <li><i class="fa fa-check"></i>   Item 3</li> </ul> </div> <div style="float: right; width: 50%;"> <ul> <li><i class="fa fa-check"></i>   Item 4</li> <li><i class="fa fa-check"></i>   Item 5</li> <li><i class="fa fa-check"></i>   Item 6</li> </ul> </div> 

Answer 1

您應該將ul浮動到右側以正確對齊。 請檢查： https : //jsfiddle.net/esx6fzyf/1/

 <p align="center">One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p> <div> <div style="float: left; width: 50%;"> <ul style="float: right;"> <li> <i class="fa fa-check"></i> Item 1 </li> <li> <i class="fa fa-check"></i> Item 2 </li> <li> <i class="fa fa-check"></i> Item 3 </li> </ul> </div> <div style="float: right; width: 50%;"> <ul> <li> <i class="fa fa-check"></i> Item 4 </li> <li> <i class="fa fa-check"></i> Item 5 </li> <li> <i class="fa fa-check"></i> Item 6 </li> </ul> </div> </div> 

Answer 2

僅使一個<div>作為容器並使用display: flex 。
這是我的做法：

<div id="container">
    <ul>
        <li><i class="fa fa-check"></i>   Item 1</li>
        <li><i class="fa fa-check"></i>   Item 2</li>
        <li><i class="fa fa-check"></i>   Item 3</li>
    </ul>
    <ul>
        <li><i class="fa fa-check"></i>   Item 4</li>
        <li><i class="fa fa-check"></i>   Item 5</li>
        <li><i class="fa fa-check"></i>   Item 6</li>
    </ul>
</div>

在CSS中：

#container {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
/* it will calculate automatically, try space-between too */
}

#container ul {
    max-width: 50%;
}

這樣應該沒問題。 看一下CSS Flexbox的多個屬性，它將使您的代碼正確且容易！

Answer 3

您可以簡單地在以下位置添加text-align：center：

 <p>One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p> <div style="width: 50%; float: left; text-align:center"> <ul style=""> <li> <i class="fa fa-check"></i> Item 1</li> <li> <i class="fa fa-check"></i> Item 2</li> <li> <i class="fa fa-check"></i> Item 3</li> </ul> </div> <div style="width: 50%; float: right; text-align:center"> <ul style="text-align:left"> <li> <i class="fa fa-check"></i> Test</li> <li> <i class="fa fa-check"></i> Lorem Ipsum</li> <li> <i class="fa fa-check"></i> Item 6</li> </ul> </div> 

Answer 4

您可以使用CSS Flexbox 。 將包含<ul> <div>包裹在父div中（在我的情況下是.ul-holder ），並應用align屬性，例如：

.ul-holder {
  display: flex;
  justify-content: center /* Horizontally aligns content in the center */
}

看看下面的代碼片段：

 .ul-holder { display: flex; justify-content: center; align-items: center; width: 100%; } .list { padding: 0 30px; } .list ul { margin: 0; padding: 0; } 

 <p align="center">One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p> <div class="ul-holder"> <div class="list"> <ul> <li> <i class="fa fa-check"></i> Item 1</li> <li> <i class="fa fa-check"></i> Item 2</li> <li> <i class="fa fa-check"></i> Item 3</li> </ul> </div> <div class="list"> <ul> <li> <i class="fa fa-check"></i> Item 4</li> <li> <i class="fa fa-check"></i> Item 5</li> <li> <i class="fa fa-check"></i> Item 6</li> </ul> </div> </div> 

希望這可以幫助！

Answer 5

沒有理由不使用令人敬畏的column-count屬性，因為它具有良好的瀏覽器支持。

我看到您創建了兩個列表用於演示目的。 從概念上講這是錯誤的。 您絕對不應修改信息層（HTML）以適合特定的演示文稿。 那就是CSS3的強大之處。

網絡是關於信息（html）+表示（css）+行為（js）的全部。

因此，我將您的兩個列表合並為一個列表，並使用CSS將其顯示在兩列中。
無論視口寬度和項目長度如何，它們始終居中。

要測試對內容長度的響應能力，請在此處的“ 類型”項中鍵入一些內容。

 section { text-align: center; } ul { -webkit-column-count: 2; column-count: 2; display: inline-block; list-style: none; padding: 0; } ul li { text-align: left; background-color: #eee; } 

 <section> <p>One day I was walking in a forest. I sat down to catch my breath. I saw a spider and it startled me. I continued walking and saw a river. It began to rain. I did not have my rain boots on. I started to get wet so I hid under a tree. When the rain stopped, I began to walk home.</p> <ul> <li contenteditable> <i class="fa fa-check"></i>TYPE here </li> <li> <i class="fa fa-check"></i>Item 2 </li> <li> <i class="fa fa-check"></i>Item 3 </li> <li> <i class="fa fa-check"></i>Item 4 </li> <li> <i class="fa fa-check"></i>Item 5 </li> <li> <i class="fa fa-check"></i>Item 6 </li> </ul> </section>