Question

我有一个＆＃34;精选＆＃34;在我的网站上排，由3个水平格式的相等元素组成。我试图通过合并百分比宽度来使网页响应，但是当我将widnow调整到小于列表宽度时，项目会相互移动。

我尝试添加最大宽度，并且使某些宽度为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

您必须在css中使用@media选择器。

查看this fiddle

我添加了以下CSS3以确保块在彼此之下滑动。

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

    }
}

CSS响应列表项以水平形式

2 个答案: