Question

我知道有很多这样的线程，但我似乎无法解决这个width:100%问题。我在菜单上有这个滑动描述，它比按钮大。我尝试添加box-sizing: border-box;，但它没有用。我不知道问题是什么。可能与#mainicons和#mainicons i的边距，填充和两个不同的css代码有关吗？

我的代码：

#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 250px;
  left: 0px;
  text-align: center;
}

#mainicons>a {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons a:hover>span {
  left: 70px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>

感谢您的帮助！：）

Answer 1

删除margin-top: 20px;和#mainicons>a

中的#mainicons i 像这样： http://output.jsbin.com/romotisalo/3

Answer 2

这是你想要的吗？从#mainicons i

中删除margin-top

另外，我删除了顶部：250px，仅用于显示示例。

#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 0px;
  left: 0px;
  text-align: center;
}

#mainicons>a {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  display: flex;
  flex-direction: column;
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons a:hover>span {
  left: 70px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>

Answer 3

可能你想要这样的东西

删除

来自margin-top: 20px

的

#mainicons i

＆＃13;

#mainicons {
  height: 50px;
  width: 70px;
  position: fixed;
  top: 250px;
  left: 0px;
  text-align: center;
}

#mainicons>a {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainicons i {
  display: flex;
  flex-direction: column;
  /*margin-top: 20px;*/
  height: 40px;
  width: 50px;
  padding: 10px;
  color: #fff;
  background: #CE9C87;
  text-align: center;
  font-size: 15px;
  line-height: 40px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons i:hover {
  -webkit-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  -moz-box-shadow: inset 7px 0px 0px 0px #CE9C87;
  box-shadow: inset 7px 0px 0px 0px #CE9C87;
  color: #CE9C87;
  background: #fff;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons span {
  color: #CE9C87;
  background: #fff;
  width: 100%;
  height: 100%;
  z-index: -1;
  font-size: 15px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: -100px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
}

#mainicons a:hover>span {
  left: 70px;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<body bgcolor="#E6E6FA">
  <div id="mainicons">
    <a href="/"><i class="fa fa-home"></i><span>Home</span></a>
    <a href="/ask"><i class="fa fa-envelope"></i><span>Ask</span></a>
    <a href="/submit"><i class="fa fa-pencil "></i><span>Request</span></a>
    <a href="/archive"><i class="fa fa-clock-o"></i><span>Archive</span></a>
  </div>

＆＃13;

宽度：比父母大100％的孩子

3 个答案: