文章类型: HTML
关键词: CSS,div,ul,li,居中,解决,解决方法
内容摘要: 以前自认为对div ul li居中对齐已经掌握了。但最近做项目时发现之前div ul li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。

CSS中ul li居中的解决方法

2016/5/12 11:06:50    来源:apple    阅读:

以前自认为对div ul li居中对齐已经掌握了。但最近做项目时发现之前div ul li的float:left方法显然有一个问题,就是无法居中(水平),只能使用padding-left或margin-right的方法方法来固定其居中。但这样可能在宽屏与窄屏的显示不一致。

使用这种方法主要是利用li的浮动固定宽度来实现,li的默认display为block,将其这个属性改为inline便可实现这种ul li居中的问题。

<%@ Page Title="" Language="C#" MasterPageFile="~/Main_MasterPage.master" AutoEventWireup="true" CodeFile="Qualification.aspx.cs" Inherits="Qualification" %>
<%@ Register src="~/UserControls/MyDataPager.ascx" tagname="MyDataPager" tagprefix="uc1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="cph_Head" Runat="Server">
    <title>资质证书信息列表</title>
    <style type="text/css">
        #quali {
            text-align:center;
        }
        #quali ul {
            margin:10px 0;
            overflow:hidden;
        }
        #quali ul li {
           display:inline; margin-right:30px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphMain" Runat="Server">
    <div id="quali">
        <ul>
            <li>
                <asp:Image ID="Image1" runat="server" ImageUrl="~/images/credentials/1.png" />
            </li>
            <li>
                <asp:Image ID="Image2" runat="server" ImageUrl="~/images/credentials/2.png" />
            </li>
        </ul>
        <ul>
            <li>
                <asp:Image ID="Image3" runat="server" ImageUrl="~/images/credentials/3.png" />
            </li>
        </ul>
        <ul>
            <li>
                <asp:Image ID="Image4" runat="server" ImageUrl="~/images/credentials/4.png" />
            </li>
        </ul>
        <ul>
            <li>
                <asp:Image ID="Image5" runat="server" ImageUrl="~/images/credentials/5.png" />
            </li>
        </ul>
    </div>
   
    <script type="text/javascript" language="javascript">
        window.load = initPage();
        function initPage() {
            var obj = document.getElementById("menu_li4");
            obj.className = "currentMenu";
        }
    </script>
</asp:Content>


↑ 上一篇文章:为Visual Studio添加ildasm工具的方法 关键词:Visual,Studio,vs,添加,ildasm,工.. 发布日期:2016/5/6 16:12:36
↓ 下一篇文章:关于百度富文本编辑器ueditor的.NET版本地图片上传提示uploader类同时存在于两个dll中的解决方法 关键词:百度,富文本编辑器,ueditor,.NET,Uploa.. 发布日期:2016/5/15 0:01:37
相关文章:
CSS教程:li和ul标签用法举例 关键词:css,CSS,li,ul,标签,用法,举例 发布日期:2015-07-29 12:06
不改变html结构用div ul li 制作导航菜单 关键词:不改变,html,结构,div,ul,li,制作,导航,菜单 发布日期:2016-01-17 18:26
用ul、li标签 创建css横向导航菜单 关键词:css,ul,li,标签,横向,导航,菜单 发布日期:2016-01-17 20:27
相关目录:.NETJAVAHTML
我要评论
正在加载评论信息......