如何在Flexbox内将ul菜单右对齐，使空白位于菜单左侧？

你的问题核心是右侧容器（.right）内的<ul>菜单默认左对齐，导致容器右侧出现空白。要让菜单右对齐、空白移到左侧，只需对.right或<ul>做简单调整，以下是几种可行方案：

方案1：给.right添加Flex布局并设置右对齐 #

修改.right的CSS，让它成为flex容器，通过justify-content: flex-end把内部元素推到右侧：

.right {
  flex:4;
  border:1px solid lime;
  display: flex; /* 新增 */
  justify-content: flex-end; /* 新增 */
}

方案2：给<ul>添加margin-left: auto #

利用margin的自动填充特性，让<ul>在.right容器里自动右移：

ul { 
  list-style:none;
  border:2px solid cyan;
  display:inline-block;
  margin-left: auto; /* 新增 */
}

方案3：给.right设置文本右对齐 #

因为<ul>是inline-block元素，可通过父容器的text-align控制它的位置：

.right {
  flex:4;
  border:1px solid lime;
  text-align: right; /* 新增 */
}

修改后的完整代码示例（以方案1为例） #

<div class="flexbox-1-4">
  <div class="left">
    <img src="https://upload.wikimedia.org/wikipedia/commons/7/7d/Wikimedia-logo-200px-transparent.png" width=100px>
  </div>
   <div class="right">
 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
   <li>Water</li>
   <li>Orange</li>
</ul>
    </div>
   </div>

.flexbox-1-4 {
  border:2px solid red;
  display:flex;
  align-items: center;
  padding:4px;
  justify-content:space-between; 
}

.left {
  flex:1;
   border:2px solid pink;
}
.right {
  flex:4;
  border:1px solid lime;
  display: flex;
  justify-content: flex-end;
}

ul { 
  list-style:none;
  border:2px solid cyan;
  display:inline-block;
}

ul li {
  display: inline-block;
padding-right:18px;
}

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