时间戳

首页 > 解决方案 > 在弹性框中的项目之间发出默认间隙

html - 在弹性框中的项目之间发出默认间隙

问题描述

给定一个简单的弹性盒：

在此处输入图像描述

我想发出 img 和绿色区域之间的空间。我怎样才能用我的代码做到这一点？

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  border: solid;
  width: 1028px;
  margin: 0 auto; /* put the container on the middle */
}

.flex-container ul {
  padding-left: 0; /* avoud the default padding to the left */
  background: green;
}

.flex-container ul li {
  display: inline-block;
  padding: 30px;
}

.flex-container img {
  vertical-align: middle;
  width: 45%;
}
<div class="flex-container">
  <div>
    <img src="https://i.imgur.com/cvO9xwB.png">
  </div>
  <div>
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Shop</li>
      <li>Contact us</li>
    </ul>
  </div>
</div>

标签： htmlcssflexbox

解决方案

对于惰性修复，您可以执行以下操作： 

  <div style="margin-right: -132px">
    <img src="https://i.imgur.com/cvO9xwB.png">
  </div>

将更多地使用您的代码，并尝试找到一种更优雅的修复方法。
如果我发现任何东西，我会编辑。
编辑： 

.flex-container img {
  vertical-align: middle;
  float: right; /*This fixes the image*/
  width: 45%;
}

我发现当你调整图像大小时，它仍然保持它的宽度，所以这就是为什么右边有空间。

推荐阅读