防止文本溢出指定的div

时间:2015-02-24 06:13:04

标签: html css

你好我已经两次发生这个问题了,我似乎无法解决第二个问题。第一次出现在图像上时,我使用了max-height,width来防止它一旦放大就会出现div,但对于包含链接的页脚,它只是赢了。

我尝试过的位置:绝对的;以及我在谷歌看到的许多其他答案,但在过去的四十分钟里我一直坚持这个问题而且我只是画空白。

#footer {
    padding-top: 0.5%;
    width: 98%;
    height: 9%;
    padding-left: 1%;
    padding-right: 1%;
    text-align: center;
    background-color: #00FF1E;
}
#footer li {
    max-width: 100%;
    max-height: 100%;
    display: inline;
    padding: 1%;
    background: #7e7e7e; /* Old browsers */
    background: -moz-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7e7e7e), color-stop(34%, #595959), color-stop(60%, #6d6d6d), color-stop(93%, #666666)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* IE10+ */
    background: linear-gradient(to bottom, #7e7e7e 0%, #595959 34%, #6d6d6d 60%, #666666 93%); /* W3C */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#666666', GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    font-size: 30px;
    word-wrap: break-word;
}
#footer a { display: inline-block; }

HTML:

 <div id="footer">
    <ul>
    <li><a href="home.php" title="homepage"> Homepage </a></li>
    <li><a href="signin.php" title="signin"> Signin </a></li>
    <li><a href="playlist.php" title="playlist"> Playlist </a></li>
    <li><a href="settings.php" title="settings"> Settings </a></li>
    </ul>
 </div>

1 个答案:

答案 0 :(得分:3)

请尝试以下操作: Demo

<强> CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

<强> HTML:

<div id="footer" class="clearfix">...</div>

来源 Link