如何避免跨度大小影响父母的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的大小不影响我的列表大小？我的意思是，我希望所有物品都有相同的尺寸，不管有多大的产卵。

Answer 1

您需要定位您的跨度绝对因此它需要它的页面的流量（不占用任何空间） - 我有评论在你的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>

Answer 2

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

.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) 
 
}

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

Answer 3

给予跨度要避免像

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

内联CSS的损害 任何风格比样式表强大