怎么让<li>标签里的两句话分别居左居右显示

怎么让<li>标签里的两句话分别居左居右显示,第1张

常用的方法是使用浮动。

将<li>中两句话分别设置样式并衫氏使用浮动。然后使用左,右浮动,这样就能左右显示了。

给出页面代码:

<ul>

<LI><span class="left"><a href="#">左边</A></SPAN>

<span class="right">右边</span>

</LI>

<ul>

在css中写法

.left{float:left width:50% }

.right{float:right width:50% }

这样就能使左边靠带罩左,右边向右显示。上面设置为左右各占外围盒子的宽度50%。

注意:左或行散右两边的宽度,相加的宽度不要超过外围<ul>盒子的宽度,否则会有一边被挤下来。

我们一般用的li是与ul或者是ol一直连用的。<ul>是锋睁无序列表,<ol>是有序列表。

<ul>

<li>Coffee</li>

<li>Milk</li>

</ul>

显示如图,每个列表项前面是个小圆圈。

<ol>

<li>Coffee</li>

<li>Milk</li>

</ol>

显示如下图,每个列表项前面是数字。

我们用的无序列表比较多,也就是ul li。我们拿ul li做比例,我们会给ul设置一个class,把他们的默认的margin和padding,还有前面的小圆点去掉

<ul class="aa">

<li>Coffee<拍如/li>

<li>Milk</li>

</ul>

.aa {

margin: 0//去掉默认margin

padding: 0 //去掉默认padding

list-style: none  //去掉前面的小圆圈

}

.aa li {

padding-left: 20px//给小图标留出前面的位置

background: url(...) no-repeat left center//如果想给每个列表项前面换个小图标,可以这样把小图标以图袭基启片的形式引入

}


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/8030248.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-12
下一篇2023-04-12

发表评论

登录后才能评论

评论列表(0条)

    保存