如何实现div内元素不受文本长度影响的对齐？

To achieve your desired layout where each button and its corresponding number appear on their own line with consistent alignment (regardless of button text length), CSS Grid is a perfect and straightforward solution. Here's how to implement it:

Step 1: Add a Class to Your Container Div #

First, give your outer <div> a class so we can target it with CSS easily:

<div class="button-number-grid">
  <button>Lorem ipsum</button>
  <span>20</span>
  <button>consectetur adipiscing elit</button>
  <span>30</span>
  <button>ABC</button>
  <span>40</span>
  <button>Something!</button>
  <span>50</span>
</div>

Step 2: Apply Grid CSS #

Add this CSS to style the container into a two-column grid:

.button-number-grid {
  display: grid;
  grid-template-columns: auto auto; /* Two columns, widths adjust to content */
  gap: 16px; /* Space between button and number - adjust as needed */
  align-items: center; /* Vertically center buttons and numbers */
}

How It Works #

• The grid-template-columns: auto auto creates two columns. The first column's width will match the widest button in your set, ensuring all buttons align perfectly to the left. The second column will fit the number text, keeping all numbers aligned consistently on the right.
• gap adds space between each button and its corresponding number for better readability.
• align-items: center ensures buttons and numbers are vertically aligned, which looks cleaner especially if buttons have varying text heights.

Alternative: Flexbox Approach (If You Prefer) #

If you'd rather use Flexbox, you can wrap each button-span pair in a container div and style those containers as flex items:

<div class="button-number-container">
  <div class="pair">
    <button>Lorem ipsum</button>
    <span>20</span>
  </div>
  <div class="pair">
    <button>consectetur adipiscing elit</button>
    <span>30</span>
  </div>
  <div class="pair">
    <button>ABC</button>
    <span>40</span>
  </div>
  <div class="pair">
    <button>Something!</button>
    <span>50</span>
  </div>
</div>

.button-number-container .pair {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px; /* Space between rows */
  align-items: center;
}

This will also give you the aligned layout, but requires modifying the HTML structure to wrap each pair. The Grid method is more efficient since it doesn't need extra wrapper elements.

内容的提问来源于stack exchange，提问作者likhita avl