HTML＆CSS - 导航栏不会使用左侧浮动水平浮动

-1

尝试使导航栏水平并且左侧的徽标处于文本不动状态。任何人都知道为什么不呢？HTML＆CSS - 导航栏不会使用左侧浮动水平浮动

CSS

body { 
    width 100%; 
    max-width: 960px; 
    margin: 0 auto; 
} 

nav { 
    width: 100%; 
    margin: 20px 0; 
} 

nav ul { 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

nav ul li { 
    width: 20%; 
    float: left; 

} 

nav ul li a { 
    display: block; 
    width: 100%; 
}

来源

2016-07-28 killerwild

您没有使用'浮动 –

在'nav'上使用'float：left'标识和'float：right'并替换'width' width'max-width：80％'或者类似的东西。 –

Demo加入

body { 
 
    width 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 20px 0; 
 
} 
 

 
nav ul { 
 
    width: 100%; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav ul li, 
 
nav ul li a { 
 
    display: inline-block; 
 
}

<!DOCTYPE html> 
 

 

 

 
<title>URBANFITNESSNI</title> 
 

 
<body> 
 

 

 
    <img src="C:\Users\Ross\Documents\UrbanFitnessNi\assets\logo.png" alt="logo"> 
 

 

 
    <nav> 
 
    <ul> 
 
     <li> 
 
     <a href="/home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="/about">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="/membership">Membership Details</a> 
 
     </li> 
 
     <li> 
 
     <a href="/facilities">Facilities</a> 
 
     </li> 
 
     <li> 
 
     <a href="/faq">FAQ</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</body>

删除

nav ul li { 
    width: 20%; 
    float: left; 

} 

nav ul li a { 
    display: block; 
    width: 100%; 
}

并更改此：

nav ul li, 
nav ul li a { 
    display: inline-block; 
}

来源

2016-07-28 15:31:50

这就是它现在的样子，它和以前一样：http://puu.sh/qhwJj/af5a41105b.png – killerwild

增加了演示。检查它 –

MB不正确的链接样式表？ –

看看这个。

https://jsfiddle.net/herxforn/5/

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px; 
 
    text-decoration: none; 
 
}

<!DOCTYPE html> 
 

 

 

 
<title>URBANFITNESSNI</title> 
 

 
<body> 
 

 

 
    <img src="C:\Users\Ross\Documents\UrbanFitnessNi\assets\logo.png" alt="logo"> 
 

 

 
    
 
    <ul> 
 
     <li> 
 
     <a href="/home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="/about">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="/membership">Membership Details</a> 
 
     </li> 
 
     <li> 
 
     <a href="/facilities">Facilities</a> 
 
     </li> 
 
     <li> 
 
     <a href="/faq">FAQ</a> 
 
     </li> 
 
    </ul> 
 
    
 

 
</body>

来源

2016-07-28 15:35:51

仍然是以前一样... http：//puu.sh/qhwYE/d09469f6ee.png – killerwild

打开我在答案中提供的链接人！ –

你可以用flexboxes做到这一点：

body { 
 
    width 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 

 
nav { 
 
    width: 100%; 
 
    margin: 20px 0; 
 
    display: flex; 
 
} 
 

 
nav img{ 
 
    max-width: 50px; 
 
    max-heigth: 50px; 
 
} 
 
nav ul { 
 
    flex: 1; 
 
    width: 100%; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    display: flex; 
 
    height: 50px; 
 
} 
 

 
nav ul li { 
 
    flex: 1; 
 
} 
 

 
nav ul li a { 
 
    display: block; 
 
    width: 100%; 
 
}

<!DOCTYPE html> 
 

 

 

 
<title>URBANFITNESSNI</title> 
 
<body> 
 
    <nav> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/a/ab/Logo_TV_2015.png" alt="logo" height="50px" width="50px"> 
 
    <ul> 
 
     <li> 
 
     <a href="/home">Home</a> 
 
     </li> 
 
     <li> 
 
     <a href="/about">About Us</a> 
 
     </li> 
 
     <li> 
 
     <a href="/membership">Membership Details</a> 
 
     </li> 
 
     <li> 
 
     <a href="/facilities">Facilities</a> 
 
     </li> 
 
     <li> 
 
     <a href="/faq">FAQ</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 

 
</body>

来源

2016-07-28 15:45:05

您需要添加共轭亚油酸ss到你的图像并将它浮动到左边。

CSS

body { 
    width 100%; 
    max-width: 960px; 
    margin: 0 auto; 
} 

nav { 
    width: 100%; 
    margin: 20px 0; 
} 

nav ul { 
    width: 100%; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

nav ul li, 
nav ul li a { 
    display: inline-block; 
} 

.logo { 
    float: left; 
}

HTML

<!DOCTYPE html> 



<title>URBANFITNESSNI</title> 

<body> 


    <img src="C:\Users\Ross\Documents\UrbanFitnessNi\assets\logo.png" alt="logo" class="logo"> 


    <nav> 
    <ul> 
     <li> 
     <a href="/home">Home</a> 
     </li> 
     <li> 
     <a href="/about">About Us</a> 
     </li> 
     <li> 
     <a href="/membership">Membership Details</a> 
     </li> 
     <li> 
     <a href="/facilities">Facilities</a> 
     </li> 
     <li> 
     <a href="/faq">FAQ</a> 
     </li> 
    </ul> 
    </nav> 

</body>

来源

2016-07-28 15:46:20 NosNits

导航条水平与左边

标志放入NAV标识一个浮动图像和ul

01在你的CSS left` !!!：

body { 
 
    width 100%; 
 
    max-width: 960px; 
 
    margin: 0 auto; 
 
} 
 
nav { 
 
    margin: 20px 0; 
 
    background: black; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
nav img { 
 
    float: left; 
 
} 
 
nav ul { 
 
    float: left; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
nav ul li { 
 
    float: left; 
 
    padding: 1em; 
 
} 
 
nav ul li a { 
 
    display: block; 
 
    color: white; 
 
    text-decoration: none; 
 
    text-align: center; 
 
}

<nav> 
 
    <img src="http://www.fillmurray.com/40/40" alt="logo"> 
 
    <ul> 
 
    <li> 
 
     <a href="/home">Home</a> 
 
    </li> 
 
    <li> 
 
     <a href="/about">About Us</a> 
 
    </li> 
 
    <li> 
 
     <a href="/membership">Membership Details</a> 
 
    </li> 
 
    <li> 
 
     <a href="/facilities">Facilities</a> 
 
    </li> 
 
    <li> 
 
     <a href="/faq">FAQ</a> 
 
    </li> 
 
    </ul> 
 
</nav>

来源

2016-07-28 15:46:35

HTML＆CSS - 导航栏不会使用左侧浮动水平浮动

回答

相关问题