css - float :left prevents click on tag

Question

我正在尝试建立一个网站并使用 CSS 对其进行设计，但我不熟悉导航栏和并排获取内容。我为我的图像( Logo )使用了“ float :左”，并且文本对齐得很好，但是，似乎我无法再完全单击图像，因为它也是可以使用标签单击的东西。那么，有什么想法吗？我的代码:

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

• 我已将 Logo 和文本放在 ul li 中并给出display:inline-block 这将使它们并排出现在一行中。

• 请尝试使用 #000 或 #fff 等颜色的十六进制代码而不是指定白色、黑色、绿色等。

• 没有display:fixed之类的东西，请看w3schools
  网站以便更好地理解。

• 我删除了 img 标签的 float:left ，因为我实现了将 Logo 和文本放在每个 pther 旁边使用display:inline-block 用于 ul li。