个人中心
gpt4 book ai didi

html -
  • 标签的 CSS Margin 自动居中

    • 转载 作者：太空宇宙 更新时间：2023-11-04 12:09:07 27 4
    gpt4 key购买 nike 

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="index.css"/>
    </head>
    <style>
    body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
        padding:0;
        margin:0;
    }

    aside,article,header,nav,footer,section,div,ul {
        display:block;
        margin:0;
        padding:0;
    }
    html {
        background:#F1C4F2;
    }
    body {
        width:1000px;
        background:#FF53A9;
        margin: 0 auto;
        font-size:12px;

    }

    #header{
        width:98%;
        background-color:#F081F3;
        padding:1%;
        color:white;
        font-size:1.2em;
    }

    #nav {
        width:98%;
        background-color:#C043AA;
        font-size:1.1em;
        padding:1%;
    }

    ul{
        margin:0 auto;
        width:100%
    }

    li {
        list-style:none;
        float:left;
        margin-right:8%;
        color:white;

    }
         OR
    /*   
         li {
        list-style:none;
        display:inline-block;
        margin-right:8%;
        color:white;

    }

        */ 
    </style>


    <body>

    <div id="header">
    some.com
    </div><!--HEADER-->

    <div id="nav">
    <ul>
        <li>Home</li>
        <li>Bio</li>
        <li>Gallery</li>
        <li>Upcoming Projects</li>
        <li>Videos</li>
    </ul>
    </div><!--NAVIGATION-->

    <div id="footer"> </div> <!--FOOTER-->

    </body>
    </html>

    我有'UL' 'NAV' <DIV> 内的标签，为了我的导航，我创建了一个 'LI'元素并将其 float ，当我应用“”时 margin:0 auto ""不适用。
    即使我使用“”display:inline-block ""(此部分已注释掉)到 ' LI '.js

    fiddle 链接:jsfiddle

    最佳答案

    尝试为您的 <ul> 添加 text-align:center并删除 float:left来自 <li>并使用 display:inline-block; <强> Demo 

    ul {
        margin:0 auto;
        width:100%;
        text-align:center;
    }
    li {
        list-style:none;
        display:inline-block;
        margin-right:8%;
        color:white;
    }

    关于html - <li> 标签的 CSS Margin 自动居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29164958/

    27 4 0
    文章推荐： linux - 子。命令在终端上不起作用
    文章推荐： css - 使 Joomla header 静态以便始终可见
    文章推荐： java - JFrame 和 JOptionPane
    文章推荐： html - 网站中间的空白