Html 如何在居中徽标的侧面提供导航选项？_Html_Css_Navigation

Html 如何在居中徽标的侧面提供导航选项？

html css navigation

Html 如何在居中徽标的侧面提供导航选项？,html,css,navigation,Html,Css,Navigation,我想创建一个顶部标题，中间有徽标，左右有导航选项下面是我到目前为止所拥有的，但不确定如何在那里形成。我能做些什么来实现这一点 <div class="header"> <div class="nav"> <ul> <li>Option 1</li> <li>Option 2</li> <li>Option

我想创建一个顶部标题，中间有徽标，左右有导航选项

下面是我到目前为止所拥有的，但不确定如何在那里形成。我能做些什么来实现这一点

<div class="header">
    <div class="nav">
        <ul>
            <li>Option 1</li>
            <li>Option 2</li>
            <li>Option 3</li>
            <li>Option 4</li>
    <img class="logo_home" src="logo.png" height="100">
            <li>Option 5</li>
            <li>Option 6</li>
            <li>Option 7</li>
            <li>Option 8</li>
        </ul>
    </div>
</div>

下面是一个关于我认为你正在努力实现的目标的例子。将

li inline更改为float

，现在需要根据您的需要修改ul，以便它可以居中

这是另一个我认为正是你们想要实现的目标。您只需删除图像中的

display:block

，然后将

text align:center

添加到ul。像这样，元素位于中心

这里是html

<div class="header">
    <div class="nav">
        <ul>
            <li href="#">Option 1</li>
            <li href="#">Option 2</li>
            <li href="#">Option 3</li>
            <li href="#">Option 4</li>
            <li><img class="logo_home" src="logo.png" height="100" /></li>
            <li href="#">Option 5</li>
            <li href="#">Option 6</li>
            <li href="#">Option 7</li>
            <li href="#">Option 8</li>
        </ul>
    </div>
</div>

下面是一个关于我认为你正在努力实现的目标的例子。将

li inline更改为float

，现在需要根据您的需要修改ul，以便它可以居中

这是另一个我认为正是你们想要实现的目标。您只需删除图像中的

display:block

，然后将

text align:center

添加到ul。像这样，元素位于中心

这里是html

<div class="header">
    <div class="nav">
        <ul>
            <li href="#">Option 1</li>
            <li href="#">Option 2</li>
            <li href="#">Option 3</li>
            <li href="#">Option 4</li>
            <li><img class="logo_home" src="logo.png" height="100" /></li>
            <li href="#">Option 5</li>
            <li href="#">Option 6</li>
            <li href="#">Option 7</li>
            <li href="#">Option 8</li>
        </ul>
    </div>
</div>

我将

display:inline

从

li

更改为

float:left

，并将

img

包装在

li

标记中。看起来它就是您要找的：

我将

显示：inline

从

li

更改为

float:left

，并将

img

包装在

li

标记中。看起来这就是你想要的：

我想这就是你想要的：

将所有内容设置为

display:inline

，并将图像放入

标记中

编辑：这里有一个更好的版本，在标志的两侧有水平堆叠的链接

我想这就是你想要的：

将所有内容设置为

display:inline

，并将图像放入

标记中

编辑：这里有一个更好的版本，在标志的两侧有水平堆叠的链接

那就更进一步了。我会将左和右划分为两个类，并放置链接

 .logo_home img{
margin:0 auto;
}
.navleft {
    float: left;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
.navleft li {
    float: left;
    padding: 5px 5px 5px 5px;
}
.navright {
    float: right;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
    .navright li {
    float: left;
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="header">
        <ul>
            <div class="navleft">
            <li><a href="#">Option 1</li>
            <li><a href="#">Option 2</li>
            <li><a href="#">Option 3</li>
            <li><a href="#">Option 4</li>
    </div>      
    <img class="logo_home" src="logo.png" height="100">
    <div class="navright">
            <li><a href="#">Option 5</li>
            <li><a href="#">Option 6</li>
            <li><a href="#">Option 7</li>
            <li><a href="#">Option 8</li>
        </ul>
    </div>
</div>

.logo\u家庭img{
保证金：0自动；
}
纳夫利特先生{
浮动：左；
宽度：500px；
高度：90px；
保证金：0自动；
填充：0；
}
李先生{
浮动：左；
填充物：5px 5px 5px；
}
纳夫赖特先生{
浮动：对；
宽度：500px；
高度：90px；
保证金：0自动；
填充：0；
}
李先生{
浮动：左；
填充物：5px 5px 5px；
}

选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8

这将进一步说明。我会将左和右划分为两个类，并放置链接

 .logo_home img{
margin:0 auto;
}
.navleft {
    float: left;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
.navleft li {
    float: left;
    padding: 5px 5px 5px 5px;
}
.navright {
    float: right;
    width: 500px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    }
    .navright li {
    float: left;
    padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="header">
        <ul>
            <div class="navleft">
            <li><a href="#">Option 1</li>
            <li><a href="#">Option 2</li>
            <li><a href="#">Option 3</li>
            <li><a href="#">Option 4</li>
    </div>      
    <img class="logo_home" src="logo.png" height="100">
    <div class="navright">
            <li><a href="#">Option 5</li>
            <li><a href="#">Option 6</li>
            <li><a href="#">Option 7</li>
            <li><a href="#">Option 8</li>
        </ul>
    </div>
</div>

.logo\u家庭img{
保证金：0自动；
}
纳夫利特先生{
浮动：左；
宽度：500px；
高度：90px；
保证金：0自动；
填充：0；
}
李先生{
浮动：左；
填充物：5px 5px 5px；
}
纳夫赖特先生{
浮动：对；
宽度：500px；
高度：90px；
保证金：0自动；
填充：0；
}
李先生{
浮动：左；
填充物：5px 5px 5px；
}

选择1
选择2
选择3
选择4
备选案文5
备选案文6
备选案文7
备选案文8

像这样的东西就可以了-

.left-li {
    float:left;
}
img {
    float:left;
}
.right-li {
    float:left;
}

这是HTML

<div class="header">
<div class="nav">
    <ul class="left-li">
        <li href="#">Option 1</li>
        <li href="#">Option 2</li>
        <li href="#">Option 3</li>
        <li href="#">Option 4</li>
    </ul>
<img class="logo_home" src="logo.png" height="100">
    <ul class="right-li">
        <li href="#">Option 5</li>
        <li href="#">Option 6</li>
        <li href="#">Option 7</li>
        <li href="#">Option 8</li>
    </ul>
</div>



选项1
选项2
选项3
选项4


选项5
选项6
选项7
选项8

像这样的东西就可以了-

.left-li {
    float:left;
}
img {
    float:left;
}
.right-li {
    float:left;
}

这是HTML

<div class="header">
<div class="nav">
    <ul class="left-li">
        <li href="#">Option 1</li>
        <li href="#">Option 2</li>
        <li href="#">Option 3</li>
        <li href="#">Option 4</li>
    </ul>
<img class="logo_home" src="logo.png" height="100">
    <ul class="right-li">
        <li href="#">Option 5</li>
        <li href="#">Option 6</li>
        <li href="#">Option 7</li>
        <li href="#">Option 8</li>
    </ul>
</div>



选项1
选项2
选项3
选项4


选项5
选项6
选项7
选项8

我只是想纠正一些与你所问问题并不相关的问题，但我发现了一个错误

li

元素没有

href

属性。@trajce对此表示抱歉！我以前在那里有一个标签，但我删除了它，但我想不知怎么的，我的href部分仍然在那里。检查我的答案，菜单是居中的。只是为了纠正一些与你所问内容不相关的问题，但我看到了一个错误

li

元素没有

href

属性。@trajce对此表示抱歉！我以前有一个标签在那里，但我删除了它，但我想不知何故我的href部分仍然在那里。检查我的答案，菜单是居中的。谢谢Artyom。但是这个标志似乎不在中心，所以我不确定这是否对我有用。谢谢Artyom。但是这个标志似乎不在中心，所以我不确定这是否对我有用。谢谢@shelby。徽标没有居中，菜单选项也没有水平对齐。我已经更新了它，如果我理解正确的话，它会工作得更好。谢谢@uncleshelby。徽标没有居中，菜单选项也没有水平对齐。我已经更新了它，如果我理解正确的话，它应该会工作得更好。谢谢@trajce！这将起作用，但菜单选项显示在标题下。我需要它们与徽标一起显示。谢谢@trajce！这将起作用，但菜单选项显示在标题下。我需要他们显示旁边的标志。