html - 如何避免跨度大小影响父级的 CSS

Question

我正在尝试在我的 webapp 元素中使用侧边栏，因为我有如下所示的 sidebar.jsp:

.social {
  width: 100px;
  height: 220px;
  left: 0px;
}

.social li a {
  display: block;
  background: #222;
  font: normal normal normal
  16px/20px 
  'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;;
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms
}

.social li{
    list-style: none;
}

.social li:first-child a:hover { background: #3b5998 }
.social li:nth-child(2) a:hover { background: #00acee }
.social li:nth-child(3) a:hover { background: #ea4c89 }
.social li:nth-child(4) a:hover { background: #dd4b39 }

.social li:first-child a { border-radius: 0 5px 0 0 }
.social li:last-child a { border-radius: 0 0 5px 0 }

.social li a span {
  width: 250px;
  float: left;
  text-align: left;
  background: #222;
  color: #fff;
  margin: -25px 74px;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms;
  overflow: auto;

}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;

}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class='social'>


  <li>
    <a href="#"> First
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>

  <li>
    <a href="#"> Second
     <span>This is a big spawn that will break my app This is a big spawn that will break my appThis is a big spawn that will break my appThis is a big spawn that will break my app</span>
    </a>
  </li>

  <li>
    <a href="#"> Third
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>  

</ul>

它工作正常，但是，正如您所看到的，“第二个”元素有一个非常大的产卵，所以这使得我的“第三个”元素之前有这么多空间。

有什么方法可以使 spawn 的大小不影响我的列表大小？我的意思是，我希望所有元素都具有相同的大小，无论 spawn 有多大。

Answer 1

你需要绝对定位你的 span，这样它就可以脱离页面流(不占用任何空间)——我在下面的 css 中添加了注释

.social {
  width: 100px;
  height: 220px;
  left: 0px;
}

.social li a {
  width:100%;
  display: block;
  background: #222;
  font: normal normal normal 16px/20px 'FontAwesome', 'Source Sans Pro', Helvetica, Arial, sans-serif;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  
  text-decoration: none;
  text-align: center;
  transition: background .5s ease .300ms;
  
  
  position:relative; /* add this to make span position relative to anchor */
}

.social li {
  list-style: none;
}

.social li:first-child a:hover {
  background: #3b5998
}

.social li:nth-child(2) a:hover {
  background: #00acee
}

.social li:nth-child(3) a:hover {
  background: #ea4c89
}

.social li:nth-child(4) a:hover {
  background: #dd4b39
}

.social li:first-child a {
  border-radius: 0 5px 0 0
}

.social li:last-child a {
  border-radius: 0 0 5px 0
}

.social li a span {
  width: 250px;
  text-align: left;
  background: #222;
  color: #fff;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-50%) rotateY(45deg); /* I added this translate just to vertically center it along with top 50% */
  border-radius: 5px;
  transition: all .5s ease .300ms;
  overflow: auto;
  
  position:absolute; /* add the following - play with top and left to adjust the position, I have removed float left and margin from here */
  left: calc(100% + 10px);  /* the 10px is the gap */
  top:50%; 
}

.social li span:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: -20px;
  top: 7px;
  border-left: 10px solid transparent;
  border-right: 10px solid #222;
  border-bottom: 10px solid transparent;
  border-top: 10px solid transparent;
}

.social li a:hover span {
  visibility: visible;
  opacity: 1;
  transform: rotateY(0)  translateY(-50%); /* translate needs to go here too */
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<ul class='social'>
  <li>
    <a href="#"> First
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>
  <li>
    <a href="#"> Second
     <span>This is a big spawn that will break my app This is a big spawn that will break my appThis is a big spawn that will break my appThis is a big spawn that will break my app</span>
    </a>
  </li>
  <li>
    <a href="#"> Third
     <span>This is a big spawn that will break my app</span>
    </a>
  </li>
</ul>