列表項目不符合要求時，跳到行（在Safari中）

我試圖創建一個列表，其中圖像與文本內聯，並且看到一個不尋常的問題，至少對我來說。在最後的四個鏈接中，圖片和文字不符合要求，但是當我將它們懸停在圖片和文字上時，並且在我停止在它們上方時保持一致。列表項目不符合要求時，跳到行（在Safari中）

所以，當頁面加載，我的名單看起來是這樣的：

[圖片]文本

[圖]

文本

但是當我將鼠標懸停在最後一個列表項，它跳到這樣的線：

[image] text

[圖片]文字

並保持這種方式後，我將鼠標移開。希望這個描述很清楚。

的HTML：

  <div class= "social"> 
      <div class= "section follow"> 
      <h1>Join Me</h1> 
      <ul> 
      <li><a title="Tumblr" href="http://nickgardner.tumblr.com"><img alt="" src="images/tumblricon3.png">Tumblr</a> 
      <li><a title="Twitter" href="http://twitter.com/#!/nerdkudzu"><img alt="" src="images/twittericon3.png">Twitter</a> 
      <li><a title="Rdio" href="http://www.rdio.com/#/people/nngardner/"><img alt="" src="images/rdioicon3.png">Rdio</a> 
      <li><a title="Dribbble" href="http://dribbble.com/nickgardner"><img alt="" src="images/dribbbleicon3.png">Dribbble</a> 
      </ul> 
      </div> 
     </div>

和CSS：

.social { 
    background: none; 
    float: left; 
    /**width: 9.9%; /* 100/1010 */ 
    margin: 15px 0 15px -29px; 
    color: #606060; 

    } 

.social .section { 
    margin-bottom: 1.5em; 
    float: right; 
    } 

.social li, 
.social h1 { 
    font-size: .9em; 
    text-transform: capitalize; 

    } 

.social h1 { 
    margin-left: 30px; 
    margin-bottom: 0; 
    text-transform: uppercase; 
    font: bold .6875em "museo-slab", serif; 
    color: #606060; 


    } 

.social li { 
    margin: 0; 
    padding: 0; 
    color: #695C44; 
    list-style-type: none; 
    } 

.social a { 
    padding: .4em 0; 

    } 

.social .follow a img { 
    float: left; 
    width: 24px; 
    margin: -5px 3px 0 0; 
    opacity: .8; 
    -webkit-transition: all 0.2s linear; 
    -moz-transition: all 0.2s linear; 
    -o-transition: all 0.2s linear; 
    transition: all 0.2s linear; 
    } 

.social .follow a:hover img { 
    opacity: .5; 
    } 

.social .follow li a { 
    padding: .5em 0 .5em 0; 
    font-family: "museo-slab", serif; 
    font-weight: normal; 
    font-style: italic; 
    color: #695C44; 
    font-size: .8.5em; 
    text-shadow: 0 2px 0 rgba(255,255,255,.5); 
    display: block; 
    } 

.social a:hover { 
    opacity: .8; 
}

感謝您的閱讀，並感謝甚至更多的響應缺口

來源

2012-03-22 nick

看起來您的帖子上有一些格式問題。嘗試重新添加圖片和CSS。 – ThinkingStiff 2012-03-22 00:05:50

真的很奇怪，在頁面加載時出現，其他時候不會，當您重新調整窗口大小時也會發生。試着將'.social li'設置爲'90px'的寬度，看看是否能夠阻止它。 – Daniel 2012-03-22 00:11:21

我確實將寬度設置爲90px，並且問題似乎得到解決！謝謝，丹尼爾。 – nick 2012-03-22 00:21:39

這是專有的那解決這類問題

li{ 
    float: none !important; 
    max-width: 90%; 
    overflow: hidden; 
    min-width: 90%; 
    display: block; 
    white-space: nowrap; 

}

來源

2015-07-05 14:38:30 omer

列表項目不符合要求時，跳到行（在Safari中）

回答

相關問題