How to display list tag inline when there's divs and images inside?-CodePudding

ul li{
  display: inline;
}

<ul>
  <li>
    <div>
       <p>This is some text in list 1 and is in a div tag</p>
    </div>
  </li>
   
  <li >
    <div>
       <p>This is some text in list 2 class and is in a div tag</p>
    </div>
  </li>
</ul>

How can I make it so that the list is displayed inline? It doesn't, I think, because the list items contain div tags, but I'm not sure. I want each item in the list to be next to each other.

CodePudding user response：

With flexbox css it's easy

ul{
    display: flex;
    gap: 20px;
    list-style: none;
}

<ul>
    <li>
      <div>
         <p>This is some text in list 1 and is in a div tag</p>
      </div>
    </li>
     
    <li>
      <div>
         <p>This is some text in list 2 class and is in a div tag</p>
      </div>
    </li>
</ul>

CodePudding user response：

I am not sure what you want to happen, but if you want to create list items that form rectangle-shaped elements which are next to to each other horizontally, use display: inline-block; and define a width for them. The divs and p elements inside them will have full width by default, i.e. the width you define for the inline-blocks:

ul li{
  display: inline-block;
  width: 30%;
  border: 1px solid #ddd;
}

<ul>
  <li>
    <div>
       <p>This is some text in list item 1 and is in a div tag</p>
    </div>
  </li>
   
  <li >
    <div>
       <p>This is some text in list item 2 and is in a div tag</p>
    </div>
  </li>
  <li>
    <div>
       <p>This is some text in list item 3 and is in a div tag</p>
    </div>
  </li>  
</ul>

If you really want everything to be inline (including the contents of the list items, i.e. the divs and p tags), you need to apply display: inline to all of them (But I can't imagine a situation where that would be practical...):

li, div, p {
  display: inline;
}

<ul>
  <li>
    <div>
       <p>This is some text in list item 1 and is in a div tag</p>
    </div>
  </li>
   
  <li >
    <div>
       <p>This is some text in list item 2 and is in a div tag</p>
    </div>
  </li>
  <li>
    <div>
       <p>This is some text in list item 3 and is in a div tag</p>
    </div>
  </li>  
</ul>

CodePudding user response：

Base on your question, it seems you want the items to be in one line but before I can give a solution I need to explain what is going on.

When an element i.e. DIV is a child of another element i.e. LI it scope is within that parent element, therefore any styling applied on it will be scoped in that parent, and will only affect that element with that parent and nothing more, except you're using a selector to affect changes in style to all children, siblings and more. For example, by default every DIV element have their display CSS properties set to block for example, see the code below

{
  display: 'block'
}

So now in your case you have a list element, inside an unordered list element, every LI you create will have a default padding, and a display of block so to ensure they all fall in the same line or be inline as stated in your question, you will need to change the display property to inline or inline-flex, you can only use inline-flex mostly if you want it to have the property of a flex box and still remain inline to the parent element.

So to achieve what you want to do, I advice you remove the padding, either set it to 0 for now, then set the display property to 'inline' and then add the padding again to give each element enough spacing as you want until you get your desire look or design. For any question, just comment here.

CodePudding user response：

Try :

ul {
    display: inline-flex;
}