I am trying to create a row of images using unordered list. But when I try to make the list inline, it isn't working. What is the error here?

#first-list ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

#first-style li {
  display: inline;
}

<div id="first-list">
  <ul>
    <li><img src="images/13.jpg" alt="13.jpg"></li>
    <li><img src="images/2.jpg" alt="2.jpg"></li>
    <li><img src="images/3.jpg" alt="3.jpg"></li>
    <li><img src="images/4.jpg" alt="4.jpg"></li>
    <li><img src="images/5.jpg" alt="5.jpg"></li>
    <li><img src="images/6.jpg" alt="6.jpg"></li>
  </ul>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Sorry display: inline should be written in li. The problem you are facing is because of the #first-style you are using before the ul and li. Remove it. Also if you have more than one unordered lists then you have to specify like this: #first-list ul and #first-list li otherwise the ul and li will apply to all lists generally.

ul{
        padding: 0;
        list-style: none;
        margin: 0;
        
    }
    
li{
       display: inline; 
    }

<div id="first-list">
            <ul>
                <li><img src="images/13.jpg" alt="13.jpg"></li>
                <li><img src="images/2.jpg" alt="2.jpg"></li>
                <li><img src="images/3.jpg" alt="3.jpg"></li>
                <li><img src="images/4.jpg" alt="4.jpg"></li>
                <li><img src="images/5.jpg" alt="5.jpg"></li>
                <li><img src="images/6.jpg" alt="6.jpg"></li>
            </ul>
        </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Your code is correct apart from using #first-style to select the correct li elements.

The id of the containing div you are interested in is first-list.

#first-list ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

#first-list li {
  display: inline;
}

<div id="first-list">
  <ul>
    <li><img src="images/13.jpg" alt="13.jpg"></li>
    <li><img src="images/2.jpg" alt="2.jpg"></li>
    <li><img src="images/3.jpg" alt="3.jpg"></li>
    <li><img src="images/4.jpg" alt="4.jpg"></li>
    <li><img src="images/5.jpg" alt="5.jpg"></li>
    <li><img src="images/6.jpg" alt="6.jpg"></li>
  </ul>
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I am not sure if you misspelled you code in the css. All you need to do is to change #first-style to #first-list. This is because when you write the id of first-style, it is refering to the first-style wrapper, which you don't have in the code provided. Also, due to the fact that you wanted to make the #first-list element inline, that is why you must find the li in the #first-list rather than the first-style. Below is a code demonstration:

#first-list ul {
  padding: 0;
  list-style: none;
  margin: 0;
}

#first-list li {
  display: inline;
}

<div id="first-list">
  <ul>
    <li><img src="images/13.jpg" alt="13.jpg"></li>
    <li><img src="images/2.jpg" alt="2.jpg"></li>
    <li><img src="images/3.jpg" alt="3.jpg"></li>
    <li><img src="images/4.jpg" alt="4.jpg"></li>
    <li><img src="images/5.jpg" alt="5.jpg"></li>
    <li><img src="images/6.jpg" alt="6.jpg"></li>
  </ul>
</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>