为了账号安全,请及时绑定邮箱和手机立即绑定

将<ul> <li>中心转换为div

将<ul> <li>中心转换为div

慕侠2389804 2019-09-20 17:23:16
经过一些搜索,我没有找到一个正确的方法来将列表中心<li>固定到一个固定的宽度div。看看页面 ..它也不起作用!
查看完整描述

3 回答

?
潇湘沐

TA贡献1816条经验 获得超6个赞

因为ul和li元素是display: block默认的 - 给它们自动边距和宽度小于它们的容器。


ul {

    width: 70%;

    margin: auto;

}

如果你已经改变了它们的显示属性,或者做了一些覆盖正常对齐规则的东西(例如浮动它们)那么这将不起作用。


查看完整回答
反对 回复 2019-09-20
?
LEATH

TA贡献1936条经验 获得超6个赞

要使ul 居中并且也将li元素置于其中心,并使ul的宽度动态变化,请使用display:inline-block; 并将其包裹在一个居中的div中。


<style type="text/css">

    .wrapper {

        text-align: center;

    }

    .wrapper ul {

        display: inline-block;

        margin: 0;

        padding: 0;

        /* For IE, the outcast */

        zoom:1;

        *display: inline;

    }

    .wrapper li {

        float: left;

        padding: 2px 5px;

        border: 1px solid black;

    }

</style>


<div class="wrapper">

    <ul>

        <li>Three</li>

        <li>Blind</li>

        <li>Mice</li>

    </ul>

</div>


查看完整回答
反对 回复 2019-09-20
?
繁星coding

TA贡献1797条经验 获得超4个赞

脚步 :


写style="text-align:center;"于母公司div的ul

写style="display:inline-table;"至ul

写style="display:inline;"至li

或使用


<div class="menu">

 <ul>

   <li>item 1 </li>

   <li>item 2 </li>

   <li>item 3 </li>

 </ul>

</div>


<style>

 .menu { text-align: center; }

 .menu ul { display:inline-table; }

 .menu li { display:inline; }

</style>


查看完整回答
反对 回复 2019-09-20
  • 3 回答
  • 0 关注
  • 615 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信