0
我可能錯過了一些明顯的東西，但是這讓我瘋狂。基本上，我的導航列表不以內聯方式顯示。我曾嘗試將display: inline-block;添加到父div和li項目，但這似乎沒有任何效果。有沒有人知道爲什麼display: inline;可能無法在這種情況下工作？爲什麼顯示：內聯;不工作在我的導航與CSS？
body {
background-color: #d3d3d3;
}
p {
text-align: left;
color: #000000;
font-size: 115%;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
}
h1 {
font-size: 200%;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
}
img {
height: 100px;
}
ul#navigationlist {
list-style-type: none;
display: inline;
}
li#nav {
float: left;
}
div#container {
background-color: #ffffff;
width: auto;
height: auto;
margin: 40px;
padding: 20px;
border: 5px solid #9b7abb;
overflow: auto;
display: table;
margin-left: 10%;
margin-right: 10%;
max-width: 1200px;
}
p#footer {
text-align: center;
background-color: #ffffff;
width: auto;
height: auto;
margin: 40px;
padding: 8px;
border: 5px solid #9b7abb;
}
a#navigation:link {
color: #000000;
background-color: #ffffff;
height: auto;
width: 12.5%;
font-size: 400%;
text-decoration: none;
border: 5px solid #9b7abb;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
}
a#navigation:visited {
color: #000000;
background-color: #ffffff;
height: auto;
width: 12.5%;
font-size: 400%;
border-style: solid;
border: 5px solid #9b7abb;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
}
a#navigation:hover {
color: #000000;
background-color: #ffffff;
height: auto;
width: 12.5%;
font-size: 400%;
border-style: solid;
border-color: #ffd801;
border: 5px solid #000000;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
}
a#navigation:active {
color: #000000;
background-color: #ffffff;
height: auto;
width: 12.5%;
font-size: 400%;
border-style: solid;
border-color: #ffd801;
border: 5px solid #9b7abb;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
}
div#menu {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.show-menu {
/*navigation*/
font-size: 200%;
height: 50px;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
text-decoration: none;
color: #fff;
background-color: #9b7abb;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox] {
/*navigation*/
display: none;
}
input[type=checkbox]:checked ~ #menu {
/*navigation*/
display: block;
}
.hoverbox {
cursor: default;
list-style: none;
}
.hoverbox a {
cursor: default;
}
.hoverbox a .preview {
display: none;
}
.hoverbox a:hover .preview {
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}
.hoverbox img {
background: #fff;
border-color: #aaa #ccC#ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: auto;
height: 100px;
display: table-row;
}
.hoverbox li {
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}
.hoverbox .preview {
border-color: #000;
width: auto;
height: 300px;
}
div#menu {
/*navigation*/
margin-left: auto;
margin-right: auto;
text-align: center;
}
.toggle-nav {
display: none;
}
@media only screen and (max-device-width: 500px) {
ul {
/*navigation*/
position: static;
display: none;
}
li {
/*navigation*/
margin-bottom: 1px;
}
ul li,
li a {
/*navigation*/
width: 100%;
}
.show-menu {
/*navigation*/
display: block;
background-color: #9b7abb;
}
label {
/*navigation*/
margin: 10px;
margin-left: auto;
margin-right: auto;
background-color: #9b7abb;
}
.navigationlist {
/*navigation*/
margin-left: auto;
margin-right: auto;
text-align: center;
}
.toggle-nav
/*navigation*/
{
display: none;
}
ul {
/*navigation*/
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
}
li {
/*navigation*/
display: inline-block;
float: left;
margin-right: 1px;
}
li a {
/*navigation*/
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: Geneva, "Arial Light", Arial, "Arial Black", sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
font-size: 200%;
}
li:hover a {
/*navigation*/
background: #19c589;
}
li:hover ul a {
/*navigation*/
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
li:hover ul a:hover {
/*navigation*/
background: #19c589;
color: #fff;
}
}<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<script src="jquery-1.12.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="screen.css">
<title>Neonskype's Portfolio - Home</title>
</head>
<body>
<div id=m enu>
<!--Navigation start-->
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
<ul id="navigationlist">
<li><a id="navigation" href="index.html" target="_self">Home</a>
</li>
<li><a id="navigation" href="aboutme.html" target="_self">About Me</a>
</li>
<li><a id="navigation" href="portfolio.html" target="_self">Portfolio</a>
</li>
<li><a id="navigation" href="socialmedia.html" target="_self">Social Media</a>
</li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</div>
<!--Navigation end-->
<div id=c ontainer>
<!--Container start-->
<h1>Welcome to My Website</h1>
<!--Heading-->
<p>Feel free to take a look around and please enjoy your stay.</p>
<img src="images/Meet_the_artist.PNG" alt="Photograph of artist" />
<!--Photograph of artist-->
<p>Did you know I'm also on DeviantArt? Head over to the social media page to find out more.</p>
</div>
<!--Container end-->
<footer>
<!--Footer start-->
<p id="footer">©Sarah O'Hagan 2016.</p>
</footer>
<!--Footer end-->
</body>
</html>
ID必須是唯一的。 –
@Pauline_D感謝您的幫助。現在導航工作正常，我現在正在改變重複的ID的類。 – stettafire