CSS在中心div中左对齐文本并自动换行

Question

有很多答案非常相似，但都没有帮助我解决我的问题。

我想要的是一个水平项目列表（对于菜单），其中所有项目的宽度都是父级的 100%（对于我使用的 flex）。

项目内的文本应该自动中断（没有<br />，我事先不知道文本）左对齐，然后中断的框应该在项目的中间。悬停时（如示例所示），整个项目（包括填充）应更改背景颜色。

元素内的左右内边距应通过此方法自动确定，以便菜单具有响应性（在移动设备上，内边距将为 0 或大屏幕相应地更大）。

我还附上了一个简化的 sn-p，它是我得到的最接近我想要的结果的东西。无论我如何更改 html 结构或 css，当项目居中时，我都无法左对齐文本（这会覆盖左对齐）。

但我不在乎结果是否完全不同，只要它无需对每个项目进行任何手动操作即可工作:)。

非常感谢任何帮助！谢谢！

    * {
      margin: 0;
      padding: 0;
    }

    ul {
      /* simulate small screen */
      width: 500px;
      display: flex;
      list-style: none;
      background: aqua;
    }

    ul li {
      padding: 10px 0;
      border-left: 1px solid red;
      flex-grow: 1;
      flex-shrink: 1;
      text-align: center;
    }

    ul li div {
      text-align: left;
      margin: 0 auto;
    }

    ul li:hover {
      background: yellow;
    }

    <ul>
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu Item Name</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu Item Name</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
    </ul>

想要的结果（第四个元素是错误的，图像是手工修复的以显示正确的结果）：

Answer 1

您可以使用诸如 bootstrap 之类的库来创建响应式元素，也可以将元素放在具有屏幕宽度的表格中，表格将为您处理定位和调整大小。

<table style="width: 100%">
    <tr>
        <td>Item 1</td>
        <td>Item 2</td>
        <td>Item 3</td>
        <td>Item 4</td>
    </tr>
<table>

https://jsfiddle.net/v1f0kz22/3/

Answer 2

应该就是这个了。

* {
      margin: 0;
      padding: 0;
    }

    ul {
      /* simulate small screen */
      width: 500px;
      display: flex;
      list-style: none;
      background: aqua;
    }

    ul li {
      padding: 10px 0;
      border-left: 1px solid red;
      flex-grow: 1;
      flex-shrink: 1;
      text-align: center;
    }

    ul li div {
      text-align: left;
      margin: 0 auto;
      padding-left: 10px;
      padding-right: 10px;
    }

    ul li:hover {
      background: yellow;
    }

<ul>
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu Item Name</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu Item Name</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
    </ul>

Answer 3

试着看一下 flex-basis ，结果和你的图片差不多。

* {
      margin: 0;
      padding: 0;
    }

    ul {
      /* simulate small screen */
      width: 500px;
      display: flex;
      list-style: none;
      background: aqua;
    }

    ul li {
      padding: 10px 0;
      border-left: 1px solid red;
      flex-grow: 1;
      flex-shrink: 1;
      // text-align: center;
      justify-content:center;
      display: flex;
    }

    ul li div {
      text-align: left;
      margin: 0 auto;
      flex: 0 0 70%;
    }

    ul li:hover {
      background: yellow;
    }

<ul>
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu Item Name</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
      
      <li>
        <div>Menu Item Name</div>
      </li>
      
      <li>
        <div>Menu Item</div>
      </li>
    </ul>

Answer 4

希望这能回答你的问题

CSS

    * {
      margin: 0;
      padding: 0;
    }

    ul {
      /* simulate small screen */
      width: 500px;
      display: flex;
      list-style: none;
      background: aqua;
    }

    ul li {
      padding: 10px 0;
      border-left: 1px solid red;
      flex-grow: 1;
      flex-shrink: 1;
      text-align: center;
    }

    ul li div {
      text-align: center;
      word-break: normal; // can use break-all for more aggressive style
      margin: 0 auto;
    }

    ul li:hover {
      background: yellow;
    }

还有 HTML

    <ul>
      <li>
        <div>Menu Item</div>
      </li>

      <li>
        <div>Menu Item Name</div>
      </li>

      <li>
        <div>Menu Item</div>
      </li>

      <li>
        <div>Menu</div>
      </li>

      <li>
        <div>Menu Item</div>
      </li>

      <li>
        <div>Menu Item Name</div>
      </li>

      <li>
        <div>Menu Item</div>
      </li>
    </ul>