تنسيق القوائم المتداخلة باستخدام CSS

To achieve the desired layout for your nested lists, you can use CSS flexbox. Here’s an example of how you can structure your HTML and CSS:

HTML:

htmlCopy code
<ul class="parent-list">
  <li>Parent 1
    <ul class="child-list">
      <li>Child 1li>
      <li>Child 2li>
      <li>Child 3li>
    ul>
  li>
  <li>Parent 2li>
  <li>Parent 3li>
ul>

CSS:

cssCopy code
.parent-list {
  display: flex;
  flex-direction: column;
}

.child-list {
  display: flex;
  flex-direction: column;
}

In this example, the parent-list class is set to display: flex; flex-direction: column; to align its items vertically. Similarly, the child-list class is set to the same to align its items vertically as well. Adjust the styles as needed for your specific layout.

To further customize the appearance of your nested lists, you can use additional CSS properties. Here are some examples:

1. Padding and Margin: Use padding to add space inside list items and margin to create space between list items.

   cssCopy code
   .parent-list {
     padding: 0;
     margin: 0;
   }
   
   .parent-list > li {
     padding: 10px;
     margin-bottom: 5px;
   }
   
   .child-list {
     padding: 0;
     margin: 0;
   }
   
   .child-list > li {
     padding: 5px 10px;
     margin-bottom: 3px;
   }
   

2. Background and Borders: Add background colors and borders to visually distinguish the nested lists.

   cssCopy code
   .parent-list > li {
     background-color: #f0f0f0;
     border: 1px solid #ccc;
   }
   
   .child-list > li {
     background-color: #fafafa;
     border: 1px solid #ddd;
   }
   

3. Text Alignment and Decoration: Align text and add decorations like underlines or italics.

   cssCopy code
   .parent-list > li {
     text-align: center;
   }
   
   .child-list > li {
     text-decoration: underline;
   }
   

4. Hover Effects: Add hover effects to highlight list items on mouseover.

   cssCopy code
   .parent-list > li:hover {
     background-color: #e0e0e0;
   }
   
   .child-list > li:hover {
     background-color: #eaeaea;
   }
   

These are just a few examples of how you can style your nested lists. Depending on your design requirements, you can further customize the appearance using CSS.