李大小相同的文字大小

我創建我的UL /李自定義菜單，但我在使用的大小問題。李大小相同的文字大小

它不會溢出兩側左右。到左側，當元素縮放它確實跑出父元素。
它佔據整個尺寸的父元素，我想李的大小是一樣的李文本的長度，使得橙色背景是文本完全相同。

我試圖

width:100%;和width:auto;

這裏是我的代碼：

HTML：

<ul class="icon"> 
           <li class="info">aaaaaa</li> 
           <li class="info">bbbbb</li> 
           <li class="info">cccccccccccc</li> 
           <li class="info">ddd</li> 
          </ul>

CSS：

ul.icon { 
    padding-left:20px; 
    list-style:none; 
} 

li.icon { 
    margin-bottom:10px; 
} 

ul.icon li:before {  
    font-family: 'FontAwesome'; 
    margin:0 5px 0 -15px; 
    font-weight: bold; 
} 

ul.icon li.info:before { 
    content: "->"; 
    color: green; 
} 

ul.icon li:hover { 
     cursor: pointer; 
     cursor: hand; 
     background-color: rgb(242, 105, 34); 
} 

li.info { 
     font-weight: bold; 
     transition: all .2s ease-in-out; 
} 

li.info:hover { 
    font-style: italic; 
    transform: scale(1.1); 
}

Live

來源

2016-02-10 Jack

如果您在:hover添加display: inline-block，並添加clear: both和float: left到li.info，像這樣：

li.info { 
    clear: both; 
    float: left; 
    font-weight: bold; 
    transition: all .2s ease-in-out; 
} 

li.info:hover { 
    display: inline-block; 
    font-style: italic; 
    transform: scale(1.1); 
}

應該正常工作，所看到here。

來源

2016-02-10 02:21:03

你可以:hover使用display:inline-block，再加上我已經固定你的CSS代碼，由於其他的一些小問題中相同類的重寫。

.icon { 
 
    padding-left: 20px; 
 
    list-style: none; 
 
} 
 
.info { 
 
    float:left; 
 
    clear:left; 
 
    font-weight: bold; 
 
    transition: all .2s ease-in-out; 
 
    margin: 0 0 10px 20px 
 
} 
 
.info:before { 
 
    font-family: 'FontAwesome'; 
 
    margin: 0 5px 0 -15px; 
 
    font-weight: bold; 
 
    content: "->"; 
 
    color: green; 
 
} 
 
.info:hover { 
 
    font-style: italic; 
 
    transform: scale(1.1); 
 
    display: inline-block; 
 
    cursor: hand; 
 
    background-color: rgb(242, 105, 34); 
 
}

<ul class="icon"> 
 
    <li class="info">aaaaaa</li> 
 
    <li class="info">bbbbb</li> 
 
    <li class="info">cccccccccccc</li> 
 
    <li class="info">ddd</li> 
 
</ul>

來源

2016-02-10 02:16:45 dippas

李大小相同的文字大小

回答

相關問題