why the elements are not be in a single line when using li with flex property?

Question

I'm new to css flex-box.

Below, I'm trying to make my 5 li elements position vertically and horizontally center inside div#master-edit-options using flex property.

How do I prevent the elements appearing on multiple lines? And why is it appearing like that?

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>

you want to align all li items vertically aligned and centered horizontally?? right? — karthik, May 14 '18 at 15:36

score 1 · Answer 1 · answered May 14 '18 at 15:37

1

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

You forget to style the ul, that is the container of the li element. Also you can delete:

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

Remember that the ul has a default padding in HTML, so put the "padding: 0" to the ul to delete it.

answered May 14 '18 at 15:37

5c4r10

159
1
4

sorry i think ul padding didn't have a role here – ADH - THE TECHIE GUY May 14 '18 at 15:44

score 1 · Accepted Answer · answered May 14 '18 at 15:39

1

Put display:flex; on the ul, since it is the actual container and not the div.

A good read on flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

answered May 14 '18 at 15:39

Flink

1,008
1
13
23

oh that is it,that solve the problrm – ADH - THE TECHIE GUY May 14 '18 at 15:41

score 1 · Answer 3 · answered May 14 '18 at 15:42

flex needs to be on the ul if you want the li to be displayed in a row:

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

tnx for you effort bro – ADH - THE TECHIE GUY May 14 '18 at 15:46 — ADH - THE TECHIE GUY, May 14 '18 at 15:46

why the elements are not be in a single line when using li with flex property?

3 Answers3