如何将内联阻止项目列表居中，同时将列表内容与左侧对齐？

Question

我在父元素内有inline-block个元素的列表。我不会将父元素居中，同时将子元素保持在左侧。

<body>
  <style>
  /* the width of the container is dynamic by the width of the window */
  .container {
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  /* i don't know the width of the list element, it's only for centering */
  .list {
    text-align: left;
  }
  /* the width of the item is const - always 200px */
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>       
    </div>
  </div>
</body>

如在所附示例中看到的，list元素未居中。如果删除align: left样式，则list元素将居中，但item元素也将居中（我希望它们向左对齐）

这是我要实现的目标：

Answer 1

诸如此类的只是给text-align：left;项目并删除text-align：center;从列表

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
	 text-align: left;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>        
    </div>
  </div>
</body>

Answer 2

通过将固定宽度设置为items或编辑list的宽度以使其小于list的50％，使所有item适应list的宽度，.item{width: 46%;}有效好

.container {
   width: 600px;
   height: 900px;
   border: 1px solid red;
   overflow-y: auto;
}

.list {
   border: 1px solid #bbb;
   width: 445px;
   margin: 0px auto;
}

.item {
   text-align: left;
   display: inline-block;
   width: 200px;
   height: 200px;
   margin: 10px;
   background: gray;
}

<body>
  <div class="container">
    <div class="list">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>
    </div>
  </div>
</body>

Answer 3

您实际上想实现什么？

现在.container和.list的宽度均为600px，因此您看不到列表元素是左对齐还是居中对齐。

首先，.list和.container的宽度应不同。然后您的列表应该是一个inline-block元素，它才能对text-align: center做出反应。

我为您制作了一个Codepen，以使其更清楚：https://codepen.io/leo-melin/pen/MWYbLLa

.container {
    width: 800px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    display: inline-block;
    width: 500px;
    border: solid 1px #000; /* Added border to make it visual */
    text-align: left;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }

Answer 4

将文本对齐：将CSS属性留给项目类。

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    text-align: center;
  }
  .item {
     display: inline-block;
     text-align: left;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>        
    </div>
  </div>
</body>

如何将内联阻止项目列表居中，同时将列表内容与左侧对齐？

问题描述投票：0回答：4

4个回答

最新问题

如何将内联阻止项目列表居中，同时将列表内容与左侧对齐？

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4