Question

在较小的设备上尝试重新定位列表（包含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; }
        }

Answer 1

我已经建立了位简化模型，并且@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;
    }
}

Fiddle is here 玩它，如果你有任何进一步的困难，请告诉我。

HTML / CSS查询 - 似乎无法为移动设备重新定位ul元素

1 个答案: