如何使用html css强制列表垂直答案

【问题标题】：How to force a list to be vertical using html css如何使用html css强制列表垂直
【发布时间】：2020-10-26 00:35:44
【问题描述】：

我有一个想要添加到<div> 的列表。每个列表项都包含一个<div>，而<div> 又包含一个图像和一个文本字符串。列表必须是垂直的。我尝试将display:block 与width:100% 放在<ul> 中，但列表从左到右水平流动。如何使列表垂直？

【问题讨论】：

你能给我们一些代码吗？

标签： html css

【解决方案1】：

尝试将display: block 放在<li> 标签中，而不是<ul>

【讨论】：

非常感谢！它现在是一个垂直列表，但对齐在左侧。我希望它位于中心
（这是一个老问题，我知道）这里有两种情况：1）如果您希望 文本对齐 居中，则使用text-align: center ul;但如果您希望列表本身在屏幕上居中且文本仍左对齐，则定义width 或max-width 属性并将margin-left: auto; margin-right: auto; 添加到其中。

【解决方案2】：

我会将它添加到 LI 的 CSS 中

.list-item
{
    float: left;
    clear: left;
}

【讨论】：

我必须删除 clear:left;它工作平静，知道为什么吗？

【解决方案3】：

希望这是你的结构：

   <ul> 
     <li>
        <div ><img.. /><p>text</p></div>
    </li>
     <li>
        <div ><img.. /><p>text</p></div>
    </li>
     <li>
        <div ><img.. /><p>text</p></div>
    </li>
   </ul>

默认是逐行添加的：

-----
-----
-----

如果你想让它垂直，只需将浮动左添加到li，给出宽度和高度，确保内容不会破坏宽度：

|  |  |
|  |  |

li
{
   display:block;
   float:left;
   width:300px; /* adjust */
   height:150px; /* adjust */
   padding: 5px; /*adjust*/
}

【讨论】：

【解决方案4】：

CSS

li {
   display: inline-block;
}

也适合我。

【讨论】：