CSS адаптивные элементы списка в горизонтальной форме

Question

У меня есть строка "Избранные" на моем сайте, которая состоит из 3 одинаковых элементов в горизонтальном формате. Я пытаюсь сделать веб-страницу отзывчивой, добавив ширину в процентах, но когда я изменяю размер виджета до ширины списка, элементы перемещаются ниже друг друга.

демонстрация

Я попытался добавить максимальную ширину и возиться с определенными значениями ширины 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>

Answer 1

Добавление это помогает.

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

Хотя для экранов действительно малой ширины обычно предпочтительнее располагать их вертикально.

Answer 2

Вы должны использовать @media селектор в вашем css.

Взгляни на эту скрипку

Я добавил следующий CSS3, чтобы убедиться, что блоки скользят друг под другом.

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

    }
}