Html 将一些元素集中在内部<；ul>；_Html_Css_Html Lists_Center

Html 将一些元素集中在内部<；ul>；

html css

Html 将一些元素集中在内部<；ul>；,html,css,html-lists,center,Html,Css,Html Lists,Center,我正在为我的项目创建管理界面。我创建了这个导航栏：但我希望我的标志在左边，我希望其他东西在中间，像这样：这是我的密码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g

我正在为我的项目创建管理界面。我创建了这个导航栏：但我希望我的标志在左边，我希望其他东西在中间，像这样：

这是我的密码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {
        background-color:#f1f1f1;
    }
    ul {
        width: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
        position:relative;
        list-style-type: none;
        padding: 0;
        margin: 0;
        background: #ffffff;
        border: 1px solid #d5e9f2;
        border-bottom: 3px solid #b8d9e9;
    }
    li {

        display: list-item;
        display:inline-block;
        margin:0;
        text-decoration:none;
        padding: 0;
        font-size: 1em;
        outline: none;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        font-size: 10px;
        line-height: 15px;
        text-transform: uppercase;
        text-align: left;
    }
    a {
        margin:0;
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
        font-size: 10px;
        line-height: 15px;
        text-transform: uppercase;
        text-align: left;
        display: block;
        padding: 12px 24px 11px 24px;
        text-decoration: none;
        color: #747474;
        text-shadow: 0px 1px 0px #fff;
    }
    a:hover {
        background: #5e9ed7;
        color: #fff;
        text-shadow: 0px 1px 0px #000;
    }   
    .logo {
        height:100px;
        width:auto; 
        margin: 0 auto 25px; 
        padding:0; outline:0; 
        display:block;
    }   
    .aktiv a{
        background: #5e9ed7;
        color: #fff;
        text-shadow: 0px 1px 0px #000;
    }
    .logowordpress {
        margin-bottom:-11px;
        height:31px;
        width:172px;
        display:inline-block;
    }

    </style>
</head>

<body>       
        <ul>
            <img class="logowordpress" src="logo2.png" />

                <li class="aktiv"><a href="#">Domov</a></li>
                <li><a href="#">pridaj používateľa</a></li>
                <li><a href="#">výpis používateľov</a></li>
                <li><a href="#">výpis vstupov</a></li>
                <li><a href="#">odhlásiť sa</a></li>

        </ul>
</body>
</html>


无标题文件
身体{
背景色：#f1f1；
}
保险商实验室{
宽度：100%；
盒影：0 1px 3px rgba（0,0,0,13）；
位置：相对位置；
列表样式类型：无；
填充：0；
保证金：0；
背景：#ffffff；
边框：1px实心#d5e9f2；
边框底部：3px实心#b8d9e9；
}
李{
显示：列表项；
显示：内联块；
保证金：0；
文字装饰：无；
填充：0；
字号：1em；
大纲：无；
字体系列：“开放式Sans”、“Helvetica Neue”、Helvetica、Arial、Sans Serif；
字体大小：10px；
线高：15px；
文本转换：大写；
文本对齐：左对齐；
}
a{
保证金：0；
字体系列：“开放式Sans”、“Helvetica Neue”、Helvetica、Arial、Sans Serif；
字体大小：10px；
线高：15px；
文本转换：大写；
文本对齐：左对齐；
显示：块；
填充：12px 24px 11px 24px；
文字装饰：无；
颜色：#7474；
文本阴影：0px 1px 0px#fff；
}
a:悬停{
背景：#5e9ed7；
颜色：#fff；
文本阴影：0px 1px 0px#000；
}   
.标志{
高度：100px；
宽度：自动；
保证金：0自动25px；
填充：0；轮廓：0；
显示：块；
}   
.aktiv a{
背景：#5e9ed7；
颜色：#fff；
文本阴影：0px 1px 0px#000；
}
.logowordpress{
边缘底部：-11px；
高度：31px；
宽度：172px；
显示：内联块；
}

感谢您的帮助，祝您度过愉快的一天

将

float:left

设置为

。按logowordpress

，然后将

文本对齐：居中

设置为

ul

将

float:left

设置为

。logowordpress

然后将

text align:center

设置为

ul

试试这个

HTML

<nav>
 <img class="logowordpress" src="logo2.png" />
 <ul> 
   <li class="aktiv"><a href="#">Domov</a></li>
   <li><a href="#">pridaj používateľa</a></li>
   <li><a href="#">výpis používateľov</a></li>
   <li><a href="#">výpis vstupov</a></li>
   <li><a href="#">odhlásiť sa</a></li>
 </ul>
</nav>

试试这个

HTML

<nav>
 <img class="logowordpress" src="logo2.png" />
 <ul> 
   <li class="aktiv"><a href="#">Domov</a></li>
   <li><a href="#">pridaj používateľa</a></li>
   <li><a href="#">výpis používateľov</a></li>
   <li><a href="#">výpis vstupov</a></li>
   <li><a href="#">odhlásiť sa</a></li>
 </ul>
</nav>

不完全正确。我想要的是

nav {
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .13);
    position:relative;
    list-style-type: none;
    padding: 0;
    margin: 0;
    background: #ffffff;
    border: 1px solid #d5e9f2;
    border-bottom: 3px solid #b8d9e9;

}
li {

    display: list-item;
    display:inline-block;
    margin:0;
    text-decoration:none;
    padding: 0;
    font-size: 1em;
    outline: none;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    font-size: 10px;
    line-height: 15px;
    text-transform: uppercase;
    text-align: left;
}
a {
    margin:0;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
    font-size: 10px;
    line-height: 15px;
    text-transform: uppercase;
    text-align: left;
    display: block;
    padding: 12px 24px 11px 24px;
    text-decoration: none;
    color: #747474;
    text-shadow: 0px 1px 0px #fff;
}
a:hover {
    background: #5e9ed7;
    color: #fff;
    text-shadow: 0px 1px 0px #000;
}   
.logo {
    height:100px;
    width:auto; 
    margin: 0 auto 25px; 
    padding:0; outline:0; 
    display:block;
    float: left;
}   
.aktiv a{
    background: #5e9ed7;
    color: #fff;
    text-shadow: 0px 1px 0px #000;
}
.logowordpress {
    margin-bottom:-11px;
    height:31px;
    width:172px;
    display:inline-block;
    float: left;
}

nav ul {
    margin: 0 auto;
    text-align: center;
}