html - ul 正在应用样式，但从哪里应用？

标签 html css html-lists

我无法找到 ul 元素中名为 nav 的类应用样式的原因。

我正在使用 nav 元素直接设置样式(不使用类)。然后我给了我的 ul 元素一个名为 nav 的类并应用样式(但从哪里？)。

我必须给我的 ul 一个 margin: 0 并且它还有一些剩余的 padding，这些样式是从哪里来的？

我对 CSS 不太熟悉，非常感谢您的帮助。

This是我复制它的地方 

body {
  background-color: #fff;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}
/* HEADER */

header {
  min-height: 750px;
  background: url(https://static.inmopaco.tk/images/banner2.jpg) no-repeat 0px 0px;
  background-size: cover;
  position: relative;
}
/* top bar menu */

.top-menu {
  background: rgba(78, 197, 241, 0.81);
  padding: 0.5em 0;
}
/* nav links */

nav {
  background: none;
  border: none;
  margin: 2.2em 0 0;
  float: left;
  padding-left: 5%;
  min-height: 50px;
}
nav:nth-child(3) {
  float: right;
  padding: 0 5% 0 0;
}
nav ul {
  list-style: none;
  margin: 0;
}
nav ul li {
  margin: 0 1em;
}
nav ul > li {
  float: left;
}
nav ul li a {
  color: #fff;
  font-size: 1.2em;
  padding: 0;
  font-weight: 600;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
nav ul li a:hover,
nav ul li a.active {
  color: #000;
  background: none;
}
nav ul li a::before {
  position: absolute;
  top: 65%;
  left: 50%;
  color: transparent;
  content: '.';
  text-shadow: 0 0 transparent;
  font-size: 1.7em;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  -moz-transition: text-shadow 0.3s, color 0.3s;
  -o-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}
nav ul li a:hover::before,
nav ul li a:focus::before,
nav ul li a.active::before {
  color: #fff;
  text-shadow: 10px 0 #000, -10px 0 #000;
}
/* logo */

.logo {
  position: absolute;
  left: 50%;
  margin: 7px -90px 0;
}
.logo img {
  width: 75%;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
nav:before,
nav:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
nav:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
<body>
  <header>
    <div class="top-menu">
      <nav>
        <ul class="nav">
          <li><a class="home active">Inicio</a>
          </li>
          <li><a class="services scroll">Servicios</a>
          </li>
          <li><a class="aboutus">Sobre Nosotros</a>
          </li>
        </ul>
      </nav>
      <a class="logo">
        <img src="//static.inmopaco.tk/images/logo.png">
      </a>
      <nav>
        <ul class="nav">
          <li><a class="home">Inscripción</a>
          </li>
          <li><a class="services">Acceso</a>
          </li>
        </ul>
      </nav>
      <div class="clearfix"></div>
    </div>
  </header>
</body>

最佳答案

ul默认有margin和padding，你只需要重置margin，就得重新设置填充也是

body {
  background-color: #fff;
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}
/* HEADER */

header {
  min-height: 750px;
  background: url(https://static.inmopaco.tk/images/banner2.jpg) no-repeat 0px 0px;
  background-size: cover;
  position: relative;
}
/* top bar menu */

.top-menu {
  background: rgba(78, 197, 241, 0.81);
  padding: 0.5em 0;
}
/* nav links */

nav {
  background: none;
  border: none;
  margin: 2.2em 0 0;
  float: left;
  padding-left: 5%;
  min-height: 50px;
}
nav:nth-child(3) {
  float: right;
  padding: 0 5% 0 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0
}
nav ul li {
  margin: 0 1em;
}
nav ul > li {
  float: left;
}
nav ul li a {
  color: #fff;
  font-size: 1.2em;
  padding: 0;
  font-weight: 600;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
}
nav ul li a:hover,
nav ul li a.active {
  color: #000;
  background: none;
}
nav ul li a::before {
  position: absolute;
  top: 65%;
  left: 50%;
  color: transparent;
  content: '.';
  text-shadow: 0 0 transparent;
  font-size: 1.7em;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  -moz-transition: text-shadow 0.3s, color 0.3s;
  -o-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  pointer-events: none;
}
nav ul li a:hover::before,
nav ul li a:focus::before,
nav ul li a.active::before {
  color: #fff;
  text-shadow: 10px 0 #000, -10px 0 #000;
}
/* logo */

.logo {
  position: absolute;
  left: 50%;
  margin: 7px -90px 0;
}
.logo img {
  width: 75%;
}
.clearfix:before,
.clearfix:after,
.dl-horizontal dd:before,
.dl-horizontal dd:after,
.container:before,
.container:after,
.container-fluid:before,
.container-fluid:after,
.row:before,
.row:after,
.form-horizontal .form-group:before,
.form-horizontal .form-group:after,
.btn-toolbar:before,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after,
nav:before,
nav:after,
.nav:before,
.nav:after,
.navbar:before,
.navbar:after,
.navbar-header:before,
.navbar-header:after,
.navbar-collapse:before,
.navbar-collapse:after,
.pager:before,
.pager:after,
.panel-body:before,
.panel-body:after,
.modal-footer:before,
.modal-footer:after {
  display: table;
  content: " ";
}
.clearfix:after,
.dl-horizontal dd:after,
.container:after,
.container-fluid:after,
.row:after,
.form-horizontal .form-group:after,
.btn-toolbar:after,
.btn-group-vertical > .btn-group:after,
nav:after,
.nav:after,
.navbar:after,
.navbar-header:after,
.navbar-collapse:after,
.pager:after,
.panel-body:after,
.modal-footer:after {
  clear: both;
}
<header>
  <div class="top-menu">
    <nav>
      <ul class="nav">
        <li><a class="home active">Inicio</a>
        </li>
        <li><a class="services scroll">Servicios</a>
        </li>
        <li><a class="aboutus">Sobre Nosotros</a>
        </li>
      </ul>
    </nav>
    <a class="logo">
      <img src="//static.inmopaco.tk/images/logo.png">
    </a>
    <nav>
      <ul class="nav">
        <li><a class="home">Inscripción</a>
        </li>
        <li><a class="services">Acceso</a>
        </li>
      </ul>
    </nav>
    <div class="clearfix"></div>
  </div>
</header>

关于html - ul 正在应用样式，但从哪里应用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37579641/

上一篇：Javascript - 将 key 发送到正确动态创建的 div

下一篇：javascript - 导航栏被分成多个 div 类 - 如何将它们全部粘贴到滚动条的顶部？ (JavaScript)

相关文章：

html - 全宽 CSS header 无法在窄浏览器窗口中正确滚动

html - JSP/HTML/CSS 到 PDF 生成

javascript - 如何显示嵌套在div中的网页？

jquery - 如何使用 jQuery 更改 ul 中事件链接的颜色？

html - 当我在表格中选择日期时，表格会移动。是CSS问题吗？

html - 当页面宽度为768px时如何替换按钮的内容？

html - 语义 HTML : List of Users

css - 如何将我的导航选项均匀地分成 2 行？

html - 在 Bootstrap 中使用 pull-right 的按钮触及右边缘

javascript - 单页显示，多页打印问题

©2024 IT工具网  联系我们