代码之家 › 专栏 › 技术社区 › ADH - THE TECHIE GUY

为什么在将li与flex属性一起使用时,元素不在一行中?[副本]

flexbox css html

ADH - THE TECHIE GUY · 技术社区 · 8 年前

我是新手 css 弹性箱。

下面,我正在尝试制作我的5 li 元素在内部垂直和水平居中放置 div#master-edit-options 使用flex属性。

如何防止元素出现在多行上?为什么会这样?

div#master-edit-options li {
  float: left;
  border: 1px solid #000;
  width: 20%;
  height: 62%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin-left: 4%;
  margin-right: 3%;
  font-size: 11px;
  background-color: #e1e1e1;
  padding-left: 9px;
  padding-right: 9px;
}

div#master-edit-options {
  height: 15%;
  width: 100%;
  border: 1px solid #000;
  background-color: yellow;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

ul,
li {
  margin: zero;
  padding: zero;
}

<div id="master-edit-options">
  <ul>
    <li>
      <span><img src="img/Save.gif"></span>
      <span>SAVE</span>
    </li>
    <li>
      <span><img src="img/Print.gif"></span>
      <span>PRINT</span>
    </li>
    <li>
      <span><img src="img/Delete.gif"></span>
      <span>DELETE</span>
    </li>
    <li>
      <span><img src="img/Clear.png"></span>
      <span>CLEAR</span>
    </li>
    <li>
      <span><img src="img/Close.gif"></span>
      <span>CLOSE</span>
    </li>
  </ul>
</div>

3 回复 | 直到 8 年前

Flink 8 年前

放 display:flex; 在 ul ,因为它是实际的容器,而不是 div 。

了解flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

5c4r10 8 年前

div#master-edit-options ul {
    display: flex;
    padding: 0;
    width: 100%;
}

您忘记设置ul的样式,这是li元素的容器。您还可以删除:

div#master-edit-options{
    display: flex;
    align-items: center;
    justify-content: center;
}

请记住,ul在HTML中有一个默认的填充,因此请将“padding:0”放在ul中以删除它。

Pete Irfan TahirKheli 8 年前

flex需要在 ul 如果你想要 li 要在行中显示:

div li {
  /* 
  float: left;             -- not needed 
  height: 62%;             -- doesn't do anything
  */
  border: 1px solid #000;
  width: 12%;              /* -- reduce this as your margin was making it this wide anyway */
  box-sizing: border-box;
  font-size: 11px;
  background-color: #e1e1e1;
  display: flex;
  align-items: center;
  justify-content: center;
  
  list-style:none;
  margin: 0;
  padding:0 9px;
}

#master-edit-options>ul {
  width: 100%;
  border: 1px solid #000;
  background-color: yellow;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between; /* looks like this is what you want to achieve with your margins on the li */
  margin:0;
  padding:0;
}

<div id="master-edit-options">
  <ul>
    <li>
      <span><img src="img/Save.gif"></span>
      <span>SAVE</span>
    </li>
    <li>
      <span><img src="img/Print.gif"></span>
      <span>PRINT</span>
    </li>
    <li>
      <span><img src="img/Delete.gif"></span>
      <span>DELETE</span>
    </li>
    <li>
      <span><img src="img/Clear.png"></span>
      <span>CLEAR</span>
    </li>
    <li>
      <span><img src="img/Close.gif"></span>
      <span>CLOSE</span>
    </li>
  </ul>
  </div