问题集中在元素上

时间:2014-10-27 17:48:49

标签: html css

我正在对菜单进行编码,这次使用CSS进行动画制作,js将类更改为显示,隐藏和半隐藏。 (我还没有开始使用js)

有些问题我不知道如何解决(变得非常紧张)。

  • 为什么上边距不是0?
  • 为什么div之间的左侧和上侧有一些填充/ margin / wtv?
  • 如何将链接垂直居中? (我想我需要继续使用100%并固定位置和溢出隐藏,因为我需要将div移出屏幕)

html,
body {
  background: #E6E6E6;
}
.menu {
  overflow: hidden;
  position: fixed;
  height: 100%;
  width: 100%;
  -webkit-transition: all ease .65s;
  -moz-transition: all ease .65s;
  -ms-transition: all ease .65s;
  -o-transition: all ease .65s;
  transition: all ease .65s;
}
.left {
  right: 0;
  margin-right: 0;
}
.left.bar {
  right: 100%;
  margin-right: -60px;
}
.left.hidden {
  right: 100%;
  margin-right: 0;
}
.menu > .links {
  color: white;
  font-family: sans-serif;
  font-size: 2.5em;
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
}
.menu li {
  color: rgba(255, 255, 255, .75);
  cursor: pointer;
  list-style: none;
  padding: 15px;
  margin: 5px;
  -webkit-transition: all ease 1s;
  -moz-transition: all ease 1s;
  -ms-transition: all ease 1s;
  -o-transition: all ease 1s;
  transition: all ease 1s;
}
.menu li:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(0, 0, 0, .1);
}
.m1 {
  background: orange;
  z-index: 8;
}
<div class="menu left m1">
  <div class="links l1">
    <ul>
      <li data-open=".m2">Architecture</li>
      <li data-open=".m3">Coding</li>
      <li data-open=".m4">Thesis</li>
    </ul>
  </div>
</div>

Screenshot

2 个答案:

答案 0 :(得分:0)

默认情况下,<UL>带有填充,这就是为什么您会看到链接左侧的间距。如果你设置

.links ul {margin:0; padding:0;}

额外的空间将被删除。作为建议,我建议将所有元素填充和边距设置为默认值为0,以帮助处理这些类型的问题。

* {
    padding:0;
    margin:0;
}

对于垂直对齐文本,如果您的文本全部位于同一行,则无法将line-height设置为与其容器垂直对齐的容器高度。

答案 1 :(得分:0)

要删除左侧和顶部的空格,您必须覆盖ul:

的默认样式
ul{
    padding: 0;
    margin: 0;
}

并垂直居中,我这样做:

.links ul{
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.links{
    height: 100%;   
}

请在此处查看:JSFiddle