Question

我怎样才能使元素居中而不留下间隙。我希望对象（圆圈）在div之后移动-50％并且它居中。图片：https://i.imgur.com/kVSb8OK.png很遗憾，我自己无法解决。

＆＃13;

.accordion,
[id^='list-'] {
  padding: 0;
  display: inline-block;
}

nav {
  width: 480px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 72px;
  border-radius: 4px;
  background-color: rgba(185, 185, 0, 0.31);
  padding: 24px;
}

.circle {
  margin-left: -50px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(#d11, #25c);
}

＆＃13;

<nav>
  <div class="test">
    <ul class="accordion">
      <span class="post-meta">Mar 13, 2018</span>
      <h2 class="post-title">
        <a class="post-link no-underline" href="">Neque porro quisquam</a>
      </h2>
      <div class="circle"></div>
  </div>
  <p class="post-summary">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form...</p>
  </ul>
  </div>
</nav>

＆＃13;

Answer 1

.circle {
  position: absolute;
  right: 50%;
}

如果我理解正确的话，这应该是你所要求的。

Answer 2

您需要定位很多东西。

“没有留下间隙”，通过这一行你的意思是你需要减少标题和段落之间的空间。所以为了做到这一点，你需要先知道导致那个空间的原因。

在我们的案例中，有多个对象（<h2>＆amp; <p>）及其各自的样式对这个空间有贡献。所以我们继续删除/减少margin s。

为了将圆圈与外部容器对齐，我们需要通过定位absolute来将其从文档流中移除，并将容器nav的位置设置为relative为了将元素的锚点原点限制在其边界。然后通过设置left属性手动定位该元素。

<强> DEMO

修改后的CSS：

.accordion {
  margin-bottom: 0px;
}
nav {
  width: 480px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 72px;
  border-radius: 4px;
  background-color: rgba(185, 185, 0, 0.31);
  padding: 24px;
  position:relative;
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: linear-gradient(#d11, #25c);
  position: absolute;
  left: -25px;
}
.accordion h2 {
    margin-bottom: 0px;
}
p.post-summary {
    padding-left: 7px;
    margin-top: 10px;
}

如何在UL元素内垂直排列元素？

2 个答案: