请使用一个div写出有三条横线的小图标

<div style="display: flex; flex-direction: column; height: 24px; justify-content: space-between; width: 24px;">
  <div style="height: 2px; background-color: black;"></div>
  <div style="height: 2px; background-color: black;"></div>
  <div style="height: 2px; background-color: black;"></div>
</div>

This code creates a div that contains three more div elements, each representing a horizontal line. Here's how it works:

• Outer div:

  • display: flex;: Enables flexbox layout.
  • flex-direction: column;: Stacks the inner divs vertically.
  • height: 24px;: Sets the overall height of the icon.
  • justify-content: space-between;: Distributes the lines evenly within the height.
  • width: 24px;: Sets the overall width of the icon.

• Inner divs:

  • height: 2px;: Sets the thickness of each line.
  • background-color: black;: Sets the color of the lines to black. You can change this to any color you prefer.

This approach is clean, flexible, and easily customizable. You can adjust the height and width of the outer div and the height and background-color of the inner divs to change the size, thickness, and color of the lines. You can also easily add more lines by adding more inner div elements.