如何避免影响父级CSS

时间：2017-05-24 09:00:46

标签： html css

我试图在我的webapp项目中使用侧边栏，因为我有我的sidebar.jsp如下：

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

view

它工作正常但是，正如你所看到的，＆＃34;第二个＆＃34; item有一个非常大的spawn，所以这使得我的第三个＆＃34;项目有这么大的空间。

有没有办法让spawn的大小不影响我的列表大小？我的意思是，无论产卵量多大，我希望所有物品都具有相同的尺寸。

3 个答案:

答案 0 :(得分：2)

您需要绝对定位您的跨度，以便将其从页面流中取出（不占用任何空间） - 我在下面的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>

答案 1 :(得分：1)

制作父元素position: relative;和子元素postion: absolute;。

＆＃13;
＆＃13; 
.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;
  position: relative;
}

.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: 0;
  padding: 8px;
  transform-origin: 0;
  visibility: hidden;
  opacity: 0;
  transform: rotateY(45deg);
  border-radius: 5px;
  transition: all .5s ease .300ms;
  overflow: auto;
  position: absolute;
  left: 100%;
}

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

答案 2 :(得分：0)

给你想要避免伤害的任何风格 像

<span style="display:inline; left:0;"> </span>

内联css比样式表强大

相关问题
最新问题