Question

我是css的初学者，我试图建立一些东西，我在红色div前面有一个黄色背景的div然后我想要黄色div旁边的灰色div。

我试图通过下面的代码来实现这一点，并且它已经几乎正在寻找我正在寻找的东西，唯一发生的事情我不想要的是灰色div在黄色div之间有一点白色空间，但是我不明白为什么。当我调整浏览器大小时，黄色div向下移动，不再高于红色div。你知道为什么吗？

谢谢！

HTML：

<div class="container" style="background-color:#e02; color:#fff;">
  <div class="content">
    <header>
      <h1>
        Title
      </h1>
    </header>
  </div>

  <div class="container" style="background-color:#fff";>
    <div class="content   ">
      <ul class="links">
        <a>Users</a>
        <a>Users</a> 
        <a>Users</a> 
        <a>Users</a> 
      </ul>
      <div class="text" style="background-color: #DDD;">
        <p>
          Go to this links and
        </p>

      </div>
    </div>
  </div>
</div>

的CSS：

*, *:before, *:after{
  margin: 0;
  padding: 0;
}


.container{float:left; width:100%}
.content{width:50%; margin:0 25%; padding: 40px 0} 

.links{
  width: 100%;
  display: inline-block;
}


.links a{
  padding: 30px;
  float: left;
  color:#aaa;
  font-size: 16px;
  font-weight: 600; 
  background: yellow;
  margin-top: -10%;
  border:1px solid #aaa;
}

的jsfiddle：

https://jsfiddle.net/s4wwmpqk/4/

Answer 1

可以通过更改.links

立即解决您的问题

.links{
     width: 100%;
     display: block;
}

并添加

.text {
     clear: both;
}

小提琴：https://jsfiddle.net/3jjv5zqe/

为什么它发生的是具有样式inline-block的继承行为。

请参阅： Why is there an unexplainable gap between these inline-block div elements?

编辑：您的链接向下移动的原因是您margin-top: -10%上的.links a。百分比根据父元素的宽度进行缩放，以便.links宽度变小，负边距也变小。

更新小提琴： https://jsfiddle.net/3jjv5zqe/1/

你知道为什么div黄色和灰色之间有一些空白区域吗？

1 个答案: