宽度：100% child 大于 parent

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

删除#mainicons>a和#mainicons i

中的margin-top: 20px;

像这样： http://output.jsbin.com/romotisalo/3

Answer 2

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

移除 margin-top

另外，我去掉了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

#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>

宽度：100% child 大于 parent

width: 100% child bigger than parent

html

css

hover

width

flexbox