为什么显示：内联;不在我的导航与CSS工作？

时间：2016-02-04 12:35:32

标签： html css

我可能错过了一些明显的东西，但它让我疯了。基本上，我的导航列表没有显示为内联。我已经尝试将display: inline-block;添加到父div和li项目中，但这似乎没有任何效果。有谁知道为什么display: inline;在这种情况下可能不起作用？

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="#">&#9776;</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">&copy;Sarah O'Hagan 2016.</p>
  </footer>
  <!--Footer end-->
</body>

</html>

1 个答案:

答案 0 :(得分：1)

您的目标是错误的元素。 LI有display: list-item。所以使用：

ul#navigationlist li {
  display: inline;
}

<强>段 

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

ul#navigationlist li {
  display: inline;
}
<!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="#">&#9776;</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">&copy;Sarah O'Hagan 2016.</p>
  </footer>
  <!--Footer end-->
</body>

</html>

相关问题
最新问题