ul正在应用样式但是从哪里开始？

时间：2016-06-01 22:14:47

标签： html css html-lists

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

我使用nav元素直接设置样式（不使用类）。然后我给了我的ul元素一个名为nav的类，并且正在应用样式（但是从哪里开始？）。

我必须给ul margin: 0 {还剩下padding，这些样式来自哪里？

我对CSS没有太多经验，我很感激帮助。

This是我复制它的地方

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

ul默认情况下为margin和padding，您只需重置margin，您还必须重置padding 

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>

相关问题
最新问题