Question

我不希望列表中有空格，左侧也有空格。请告诉我如何使用纯CSS进行简单的滚动效果。请告诉我一个来源，我可以从中了解css属性之间的兼容性问题（如果有的话）

body {
  margin: 0;
}
#nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  color: #000000;
  background-color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bolder;
}
#nav ul {
  margin: 0;
}
#nav li {
  display: inline-block;
  line-height: 3em;
  width: auto;
  padding: 0 1em;
}
a {
  color: inherit;
  text-decoration: none;
}
#menu_advanced_search:hover {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_advanced_search {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_explore:hover {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_explore {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_forum:hover {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_forum {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_report_a_bug:hover {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_report_a_bug {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_feedback:hover {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_feedback {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_login_signup:hover {
  color: #FFFFFF;
  background-color: #000000;
}
#menu_login_signup {
  color: #FFFFFF;
  background-color: #000000;
}
#main {
  background-color: #FFFFFF;
  height: 100%;
  left: 0;
  right: 0;
}
#advanced_search {
  background-color: #0066FF;
  height: 100%;
  left: 0;
  right: 0;
}
#explore {
  background-color: #FFFF00;
  height: 100%;
  left: 0;
  right: 0;
}
#forum {
  background-color: #009900;
  height: 100%;
  left: 0;
  right: 0;
}
#report_a_bug {
  background-color: #FF0000;
  height: 100%;
  left: 0;
  right: 0;
}
#feedback {
  background-color: #CC0099;
  height: 100%;
  left: 0;
  right: 0;
}
#login_signup {
  background-color: #000000;
  height: 100%;
  left: 0;
  right: 0;
}

<html>

<head>
  <title>CARZPEDIA</title>
</head>

<body>
  <div id="nav">
    <ul>
      <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a>
      </li>
      <li id="menu_explore"><a href="#explore">EXPLORE</a>
      </li>
      <li id="menu_forum"><a href="#forum">FORUM</a>
      </li>
      <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a>
      </li>
      <li id="menu_feedback"><a href="#feedback">FEEDBACK</a>
      </li>
      <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a>
      </li>
    </ul>
  </div>
  <div id="main" class="scrolleffect">
  </div>
  <div id="advanced_search" class="scrolleffect">
  </div>
  <div id="explore" class="scrolleffect">
  </div>
  <div id="forum" class="scrolleffect">
  </div>
  <div id="report_a_bug" class="scrolleffect">
  </div>
  <div id="feedback" class="scrolleffect">
  </div>
  <div id="login_signup">
  </div>
</body>

</html>

Answer 1

您可以通过执行以下操作来实现此目的：

#nav ul {
    margin: 0;
    padding-left: 0; /* add padding-left: 0; to remove the space on left side of the ul */
    font-size: 0; /* add font-size: 0; to remove the white space between inline-block elements */
}
#nav li {
    display: inline-block;
    line-height: 3em;
    width: auto;
    padding: 0 1em;
    font-size: 16px; /* add font-size: 16px; to reset the font-size to li (i.e 1em = 16px) */
}

body {
  margin: 0;
}
#nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  color: #000000;
  background-color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bolder;
}
#nav ul {
  margin: 0;
  padding-left: 0;
  font-size: 0;
}
#nav li {
  display: inline-block;
  line-height: 3em;
  width: auto;
  padding: 0 1em;
  font-size: 16px;
}
a {
  color: inherit;
  text-decoration: none;
}
#menu_advanced_search:hover {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_advanced_search {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_explore:hover {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_explore {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_forum:hover {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_forum {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_report_a_bug:hover {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_report_a_bug {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_feedback:hover {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_feedback {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_login_signup:hover {
  color: #FFFFFF;
  background-color: #000000;
}
#menu_login_signup {
  color: #FFFFFF;
  background-color: #000000;
}
#main {
  background-color: #FFFFFF;
  height: 100%;
  left: 0;
  right: 0;
}
#advanced_search {
  background-color: #0066FF;
  height: 100%;
  left: 0;
  right: 0;
}
#explore {
  background-color: #FFFF00;
  height: 100%;
  left: 0;
  right: 0;
}
#forum {
  background-color: #009900;
  height: 100%;
  left: 0;
  right: 0;
}
#report_a_bug {
  background-color: #FF0000;
  height: 100%;
  left: 0;
  right: 0;
}
#feedback {
  background-color: #CC0099;
  height: 100%;
  left: 0;
  right: 0;
}
#login_signup {
  background-color: #000000;
  height: 100%;
  left: 0;
  right: 0;
}

<html>

<head>
  <title>CARZPEDIA</title>
</head>

<body>
  <div id="nav">
    <ul>
      <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a>
      </li>
      <li id="menu_explore"><a href="#explore">EXPLORE</a>
      </li>
      <li id="menu_forum"><a href="#forum">FORUM</a>
      </li>
      <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a>
      </li>
      <li id="menu_feedback"><a href="#feedback">FEEDBACK</a>
      </li>
      <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a>
      </li>
    </ul>
  </div>
  <div id="main" class="scrolleffect">
  </div>
  <div id="advanced_search" class="scrolleffect">
  </div>
  <div id="explore" class="scrolleffect">
  </div>
  <div id="forum" class="scrolleffect">
  </div>
  <div id="report_a_bug" class="scrolleffect">
  </div>
  <div id="feedback" class="scrolleffect">
  </div>
  <div id="login_signup">
  </div>
</body>

</html>

Answer 2

为float:left添加#nav li，它将解决问题

body {
  margin: 0;
}
#nav {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: auto;
  color: #000000;
  background-color: #FFFFFF;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bolder;
}
#nav ul {
  margin: 0;
}
#nav li {
  display: inline-block;
  line-height: 3em;
  width: auto;
  padding: 0 1em;
  float:left;
}
a {
  color: inherit;
  text-decoration: none;
}
#menu_advanced_search:hover {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_advanced_search {
  color: #FFFFFF;
  background-color: #0066FF;
}
#menu_explore:hover {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_explore {
  color: #FFFFFF;
  background-color: #FFFF00;
}
#menu_forum:hover {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_forum {
  color: #FFFFFF;
  background-color: #009900;
}
#menu_report_a_bug:hover {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_report_a_bug {
  color: #FFFFFF;
  background-color: #FF0000;
}
#menu_feedback:hover {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_feedback {
  color: #FFFFFF;
  background-color: #CC0099;
}
#menu_login_signup:hover {
  color: #FFFFFF;
  background-color: #000000;
}
#menu_login_signup {
  color: #FFFFFF;
  background-color: #000000;
}
#main {
  background-color: #FFFFFF;
  height: 100%;
  left: 0;
  right: 0;
}
#advanced_search {
  background-color: #0066FF;
  height: 100%;
  left: 0;
  right: 0;
}
#explore {
  background-color: #FFFF00;
  height: 100%;
  left: 0;
  right: 0;
}
#forum {
  background-color: #009900;
  height: 100%;
  left: 0;
  right: 0;
}
#report_a_bug {
  background-color: #FF0000;
  height: 100%;
  left: 0;
  right: 0;
}
#feedback {
  background-color: #CC0099;
  height: 100%;
  left: 0;
  right: 0;
}
#login_signup {
  background-color: #000000;
  height: 100%;
  left: 0;
  right: 0;
}

<html>

<head>
  <title>CARZPEDIA</title>
</head>

<body>
  <div id="nav">
    <ul>
      <li id="menu_advanced_search"><a href="#advanced_search">ADVANCED SEARCH</a>
      </li>
      <li id="menu_explore"><a href="#explore">EXPLORE</a>
      </li>
      <li id="menu_forum"><a href="#forum">FORUM</a>
      </li>
      <li id="menu_report_a_bug"><a href="#report_a_bug">REPORT A BUG</a>
      </li>
      <li id="menu_feedback"><a href="#feedback">FEEDBACK</a>
      </li>
      <li id="menu_login_signup"><a href="#login_signup">LOGIN/SIGNUP</a>
      </li>
    </ul>
  </div>
  <div id="main" class="scrolleffect">
  </div>
  <div id="advanced_search" class="scrolleffect">
  </div>
  <div id="explore" class="scrolleffect">
  </div>
  <div id="forum" class="scrolleffect">
  </div>
  <div id="report_a_bug" class="scrolleffect">
  </div>
  <div id="feedback" class="scrolleffect">
  </div>
  <div id="login_signup">
  </div>
</body>

</html>

Answer 3

为display:inline-block添加#nav li。它将解决问题并避免浮动的痛点。

列表之间的空格，ul左侧的空格。如何删除？

3 个答案: