在较小的设备上尝试重新定位列表（包含 2 个项目）时，我遇到了一个小问题。 我已经尝试了很多东西，但还没有完全到达那里，因为我似乎无法将列表元素集中在较小的设备上。
基本上，我有一个标题和一个列表，在大型设备上，标题和列表在同一行（标题左侧，列表项内联在右侧）。然后对于较小的设备，我想将列表移动到标题下方，使它们保持内联（同一行），直到不再可能，当它们彼此低于时，但在整个过程中保持页面中心。目前，我可以将列表移动到下一行，当两者不能放在同一行时，它会移动到每行一个。但是，我很难将它们保持在中心。任何建议将不胜感激。
这是一个 jsfiddle - https://jsfiddle.net/anyd1nuf/
.HTML：
<body style="overflow: auto;" class="no-touch">
<section class="soundtrack" id="Soundtrack">
<div class="container">
<header class="group">
<h2>Soundtrack</h2>
</header>
<div class="carousel-container">
<div class="responsive-carousel">
<ul class="items group">
<a href="#"><li class="item">
<p>Menu<br />.../p>
</li></a>
<a href="#"><li class="item">
<p>...<br />... - ...</p>
</li></a>
</ul>
</div>
</div>
</div>
</section>
</body>
.CSS
h2 {
font-family:arial;
color:#fff;
letter-spacing: 3px;
text-transform: uppercase;
font-size: 35px;
font-size: 3.5rem; }
@media (min-width: 480px) {
h2 {
letter-spacing: 6px; } }
@media (min-width: 1000px) {
h2 {
letter-spacing: 12px; } }
.soundtrack {
background: #000;
box-shadow: 0px -20px 20px rgba(0, 0, 0, 5.175), 0px 20px 20px rgba(0, 0, 0, 5.175);
min-height: 175px;
overflow: hidden;
position: relative;
z-index: 100; }
.soundtrack .carousel-container {
margin: 0 auto;
padding: 42px 0 0;
width: auto; }
.soundtrack .carousel-container .responsive-carousel {
margin: 0 auto;
width: auto;
}
@media (max-width: 1000px) {
.soundtrack .carousel-container .responsive-carousel {
}
.soundtrack .carousel-container .responsive-carousel .items {
margin: 0 0 0 20%;
}
}
@media (min-width: 1000px) {
.soundtrack header {
float: left;
display:inline-block;
margin: 50px 5% 0 0;
}
}
.soundtrack .carousel-container .responsive-carousel .items .item {
float: left;
border: 2px solid #fff;
box-shadow:4px 4px 25px rgba(255, 255, 255, 0.075), -4px -4px 25px rgba(255, 255, 255, 0.075);
border-radius: 5px;
display: inline-block;
height: 55px;
margin: 7px 15px;
position: relative;
text-align: center;
vertical-align: top;
width: 232px;
margin: 0 0 30px 0; }
.soundtrack .carousel-container .responsive-carousel .items .item:hover {
background: none repeat scroll 0 0 rgba(255, 255, 255, 1.0);
color:#000;
box-shadow:10px 10px 25px rgba(255, 255, 255, 0.15), -10px -10px 25px rgba(255, 255, 255, 0.15);
}
@media (min-width: 480px) {
.soundtrack .carousel-container .responsive-carousel .items .item {
margin: 0 20px 30px 0; }
}
@media (min-width: 768px) {
.soundtrack .carousel-container .responsive-carousel .items .item {
margin: 0 40px 50px 0; }
.soundtrack .carousel-container .responsive-carousel .items .item img {
display: block; }
}
我已经构建了一点简化的模型，而且@Mr Lister的评论是正确的-您在标记中遇到了几个问题。
因此，您可能需要调整您的特定情况，但它可能是这样的：
.HTML：
<section class="soundtrack" id="Soundtrack">
<div class="container">
<header class="group">
<h2>Soundtrack</h2>
</header>
<div class="carousel-container">
<div class="responsive-carousel">
<ul class="items group">
<li class="item"> <a href="#"><p>Menu</p></a>
</li>
<li class="item"> <a href="#"><p>Menu 2</p></a>
</li>
</ul>
</div>
</div>
</div>
</section>
.CSS：
header, .carousel-container {
display:inline-block;
}
.items {
list-style:none;
margin:0;
padding:0;
}
h2 {
text-align:center;
}
.item {
display: inline-block;
padding:10px;
border:1px solid black;
border-radius:3px;
width:100px;
text-align:center;
}
@media (max-width:380px) {
header, .carousel-container {
display:block;
}
.responsive-carousel {
text-align: center;
}
}
小提琴来了。
玩它，如果你有任何进一步的困难，请告诉我。