水平格式的CSS響應列表項目

我在我的網站上有一個「精選」行，它由3個水平格式的相同元素組成。我試圖通過合併百分比寬度來使網頁響應，但是當我將widnow的大小調整爲小於列表寬度時，這些項將移動到彼此之下。水平格式的CSS響應列表項目

我曾嘗試添加一個最大寬度，並具有一定寬度爲auto和100%，但仍沒有運氣亂搞。

我甚至可能會以錯誤的方式討論代碼，因爲我在錨點中有列表項，以使整個項目成爲可點擊的鏈接。

這裏是我的代碼的一部分，其餘的是用小提琴：

CSS：

.FeatureRow { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
} 
.FeatureRow li { 
    float: left; 
    width: auto; 
    margin: 10px; 
    background-image: -moz-linear-gradient(top, #fbfbfb, #ffffff); 
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbfbfb), to(#ffffff)); 
    background-image: -webkit-linear-gradient(top, #fbfbfb, #ffffff); 
    background-image:  -o-linear-gradient(top, #fbfbfb, #ffffff); 
    background-image:   linear-gradient(to bottom, #fbfbfb, #ffffff); 
    background-repeat: repeat-x; 
    border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
} 
.FeatureRow a { 
    padding: 10px; 
    display: block; 
    width: 100%; 
    max-width: 260px; 
    height: auto; 
      border-radius: 5px; 
    -webkit-border-radius: 5px; 
     -moz-border-radius: 5px; 
    -webkit-box-shadow: 0px 4px 8px #f5f5f5; 
     -moz-box-shadow: 0px 4px 8px #f5f5f5; 
      box-shadow: 0px 4px 8px #f5f5f5; 
    background-color: transparent; 
    transition: all 500ms ease-in-out; 
    -webkit-transition: all 500ms ease-in-out; 
     -moz-transition: all 500ms ease-in-out; 
     -ms-transition: all 500ms ease-in-out; 
     -o-transition: all 500ms ease-in-out; 
}

HTML：

<ul class="FeatureRow"> 
<li> 
    <a href="/contact/"> 
     <h2 class="SpeechBg">Need some help?</h2> 
     <p>Feel free to get in contact with us</p> 
    </a> 
</li> 
<li> 
    <a href="/property/"> 
     <h2 class="BinocularsBg">Country or City?</h2> 
     <p>You can always find a place, no mater where it is!</p> 
    </a> 
</li> 
<li> 
    <a href="/property/"> 
     <h2 class="CameraBg">Now that's scenary!</h2> 
     <p>We guarantee than you will love the views from all of our unique locations</p> 
    </a> 
</li> 
</ul>

來源

2014-01-23 Josh Luke Blease

你試過使用flexbox嗎？ – Jason

注意前綴CSS屬性的排序。你希望前綴最後得到，以確保它不會被其他人覆蓋。 – kleinfreund

我不知道css3'calc'屬性會有幫助嗎？ http://caniuse.com/#feat=calc – Phlume

添加這有助於。

.FeatureRow li{ 
    width: 30%; 
    display: inline-block; 
}

儘管爲了真正的小寬度簾，通常優選的是具有它們垂直堆疊。

來源

2014-01-23 19:25:09 CRABOLO

這是完美的，謝謝！是的，我知道他們的用戶更喜歡他們堆放在小屏幕上，這就是爲什麼我有媒體查詢，我只是把它們剪掉。 –

你必須在你的CSS中使用@media選擇器。

看看this fiddle

添加以下CSS3，以確保塊彼此下方滑動。

@media(max-width: 880px) { 
    .FeatureRow li { 
     width: 100%; 
    } 
} 
.FeatureRow a { 
    max-width: 100%' 

    } 
}

來源

2014-01-23 19:30:04

水平格式的CSS響應列表項目

回答

相關問題