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 - 導航欄不會使用左側浮動水平浮動

回答

相關問題