Question

我正在为我的项目创建管理界面。我创建了这个导航栏：http://imgur.com/cGmFGcr 但我希望我的徽标位于左侧，我希望中间的其他内容如下：http://imgur.com/5t2Egvm

这是我的代码：

<!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>

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

Answer 1

将float:left提交至.logowordpress，然后将text-align:center设为ul

Jsfiddle

.logowordpress
{
    float: left;
}

ul
{
    text-align: center;
}

Answer 2

试试这个https://jsfiddle.net/2Lzo9vfc/148/

<强> 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>

<强> CSS

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;
}

将一些元素放在<ul>中

2 个答案: