Css 浮动：左键单击<；a href>；标签

我试图建立一个网站，我使用CSS来设计它，但我不熟悉导航栏和并排获取内容。我用了一个“float:left”作为我的图像（logo）和文本对齐，但是，似乎我不能再完全点击图像了，因为它也是可以用标签点击的东西。有什么想法吗？我的代码：

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

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

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

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

HTML:

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

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

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

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

你好
世界

您好，请查看下面的html和css

HTML:

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

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

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

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

请检查JSFIDLE：

我已经清理了你的html和css

• 我已将徽标以及文本放置在

  ul li

  中并给出

  display:inline块

  ，使它们相邻显示 在一行中
• 请尝试对颜色使用十六进制代码，如#000或#fff 而不是指定白色、黑色、绿色等

• 没有显示：固定，请参见
  更好地了解网站

• 我删除了

  img

  标记的

  float:left

  ，因为我实现了 使用将徽标和文字带到每个pther旁边

  显示：用于
  ul li的内联块

---

请发布一个完整的示例，包括HTML。我非常确定没有像

display:fixed

这样的东西，在css中也给导航栏一个宽度和高度，而且display:fixed应该是position:fixed；呜呜，我有点不舒服，这么晚了。但是，我仍然不确定它将如何改变我的问题，因为它仍然存在。有什么想法吗？~

• 你好
• 世界
你好。我已经提供了答案。请让我知道它是否解决了您的问题