Is there a way to position unordered lists (<ul>) next to each other-CodePudding

I'm new to HTML and apologize if this has been asked before (but I couldn't find a previous post). I am working on a website and am trying to position several lists next to each other instead of below each other, but am having trouble accomplishing this. I have included my code below, and please let me know if you need additional lines.

<!-- Resume Skills -->
                <div>
                <i ></i>           
                 <p><br><i><b><i style="font-size:20px" ;</i>Job Skills</b><br></i></p>
                  <ul><i>
                  <li>One</li>
                  <li>Two</li>
                  <li>Three</li>
                  <li>Four</li>
                  <li>Five</li>
                  <li>Six</li>
                  <li>Seven</li></i>
                 </ul>
                </div>     
                <!-- Areas of Interest -->
                <div>
                <i ></i>            
                 <p><br><i><b><i style="font-size:20px" ;</i>Areas of Interests</b><br></i></p>
                  <ul><i>
                  <li>Carpentry</li>
                  <li>Welding</li>
                  <li>Electrical</li>
                  <li>General Contracting</li>
                  <li>Management</li>
                  <li>Logistical Support</li>
                  <li>Accounting</li></i>
                 </ul>
                <div>

CodePudding user response：

flex is an option the other option could be grid.

I write an example

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

<div >
  <p> 1 </p>
  <p> 2 </p>
  <p> 3 </p>
</div>

CodePudding user response：

Adding style to ul can simply solve the problem. ul {display:flex; flex-direction: row}

Here's the sample code

<style>
   ul {
     display: flex;
     flex-direction: row;
   }
   li {
     margin-left: 20px;
     list-style-type: none;
   }
</style>
<body>
    <div>
      <i ></i>           
       <p><br><i><b><i style="font-size:20px" ;</i>Job Skills</b><br></i></p>
        <ul>
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
        <li>Four</li>
        <li>Five</li>
        <li>Six</li>
        <li>Seven</li>
       </ul>
      </div>     
      <!-- Areas of Interest -->
      <div>
      <i ></i>            
       <p><br><i><b><i style="font-size:20px" ;</i>Areas of Interests</b><br></i></p>
        <ul>
        <li>Carpentry</li>
        <li>Welding</li>
        <li>Electrical</li>
        <li>General Contracting</li>
        <li>Management</li>
        <li>Logistical Support</li>
        <li>Accounting</li>
       </ul>
      <div>
  </body>