协助无序列表

Question

在http://www.devsite11.co.uk/about-us/areas-we-cover.html测试一个想法我创建了一个背景框，有三个列表，在P.C上显示的列表都是并排的，这是预期的。 我遇到的问题是，当涉及到iPad或Iphone时，这些列表不会缩小，而且会变得混乱。

我玩过％的年龄都无济于事。

我想要发生的事情是，列表中的列表会相互下降，或者文本会减少并保持并排。

提前感谢你的帮助。

Answer 1

你可以这样做：

    .featurebox, .featurecenter, .featureright {
        min-width:250px; /* or something smaller*/
    }

让我知道它是否适合你？

Answer 2

尝试在每个功能框上设置最小宽度，例如min-width:200px或任何值，以防止它们崩溃太多。此外，您可以应用于每个框上的常用样式的类是首选方法。

此外，左侧有“左侧”框，右侧有“中间”框，中间有“右侧”框。尝试将所有这三个浮点数更改为float:left以使其正确。

Answer 3

在第147行和您的样式的其他位置，您的宽度设置为31%。 E.g。

#featurebox .featureleft {
width: 31%;
margin-left: 0px;
padding-right: 10px;
float: left;
}

这在小宽度下不起作用，因此在@media规则中，请确保在适当的位置更改该宽度。 E.g。

@media only screen and (max-width: 770px) {
    #featurebox .featureleft,
    #featurebox .featurecenter,
    #featurebox .featureright {width: 100%;}
}