Question

我正在尝试建立一个网站，我正在使用CSS来设计它，但我不熟悉导航栏并且并排获取内容。我使用“浮动：左”作为我的图像（徽标）以及文本对齐但是，似乎我不能完全点击图像，因为它也可以使用标签点击。那么，有什么想法吗？我的代码：

CSS：

#navbar {
        width: 100%;
        height: 40px;
        background-color: black;
        opacity: 0.7;
        display: fixed;
}

#navbar img {
        opacity: 1;
        float: left;
}

#navbar img:hover {
        opacity: 0.7;
}

#navbar img a
{
        margin: 0;
        padding: 0;
}

#navbar ul
{
        position: relative;
        list-style-type:none;
        margin:0;
        padding: 8px 0 0 0;
        color: white;
        font-size: 1.5em;
}

#navbar ul a
{
        display:block;
        width:60px;
}

#navbar li
{
        display:inline;
}

HTML：

<div id="navbar"> 
     <a href="#"><img src="logo.png"/></a> 
     <ul> <li>Hello</li> <li>World</li> 
    </ul> 
</div>

Answer 1

您好请参阅以下html和css

<强> HTML：

<div id="navbar">  
    <ul> 
        <li><a href="#"><img src="logo.png"/></a></li>    
        <li>Hello World</li> 
    </ul> 
</div>

<强> CSS：

#navbar {
        width: 100%;
        height: 40px;
        background-color: black;
        opacity: 0.7;        
}

#navbar img {
        opacity: 1;

}

#navbar img:hover {
        opacity: 0.7;
}

#navbar img a
{
        margin: 0;
        padding: 0;
}

#navbar ul li
{

        list-style-type:none;
        margin:0;
        padding: 8px;
        color: white;
        font-size: 1.5em;
}



#navbar ul li
{
        display:inline-block;
}

请检查jsfiddle：http://jsfiddle.net/Luncqwn3/3/

我已经清理了你的html和css

我已将徽标以及ul li中的文字放置并给出 display:inline-block会使它们彼此相邻在一条线上。
请尝试使用十六进制代码来填充＃000或#fff等颜色而不是指定白色，黑色，绿色等。
没有显示：固定，请参阅w3schools
更好地了解网站。
我删除了float:left标记img，因为我实现了使用标识和文本旁边的每个pther display:inline-block的{{1}}。

浮动：左侧阻止点击<a href=""> tag</a>

1 个答案: