display <li> line wise CSS </li>

Question

我有多个li-a标签，里面有不同大小的文字。我怎样才能显示这一行。到目前为止，所有的li -a标签都挤在一条线上，我希望它分开。应该能够处理单行和多行文本..

<ul>

   <li><a>AAAA </a></li>
   <li><a>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB </a></li>
   <li><a>CCCCCCCCCCCCCCCCCCCCCCC</a></li>
   <li><a>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</a></li>


 </ul>

显示应该是：

AAAA                                                     
BBBBBBBBBBBBBBBBBBBBBBB                 
CCCCCCCCCCCCCCC                          
DDDDDDDDDDDDDDDDDDDD

截至目前，它是：

AAAAAABBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBCCCCCCCCCCCCCCCCCCCCCCCCCDDDDDDDDDDDDDDD

CSS

ul li a{
  line-height: 45px;   
  border: 1px solid #ff0000;
  margin-left:10px
}

Answer 1

li是默认情况下必须工作的块元素。但是在某个地方你已经改变了为什么它没有工作，所以重置添加块，如下所示

将display：block添加到li元素

ul li{
 display:block;
}