Question

我想要一个标题，一个标志和一个按钮，所有标题都在标题居中的位置，标识偏向正确，按钮在右侧是小的。

如果我修复边距，我可以一起破解，但这不是可扩展的，因此不希望它作为最终解决方案。有什么更好的方法呢？

我的代码如下，我也在此处发布：http://codepen.io/blueduckyy/pen/RpKoMJ。

HTML：

  <div class="top-bar username-heading">
      <img src="http://www.wonko.info/ipt/xfiles/interfaces/target.bmp" alt="Missing">
      <h1>blueduckyy</h1>
      <a class="button user-edit-button" href="/users/edit">Edit</a>
  </div>

CSS：

.username-heading img {
  float: right;
  width: 100px;
  height: 100px;
  margin-left:-250px;
  margin-right:150px;
}

.username-heading h1 {
  position: relative;
  top: 18px;
  left: 10px;
  text-align: center;
  font-size: 3.5rem;
  font-weight: bold;
}

.username-heading {
  height: 120px;
  background: yellow;
}

.user-edit-button {
  float: right;
  padding: 5px 5px 5px 5px;
  margin-top: -20px;
  margin-bottom: 1px;

Answer 1

只需使用定位，

position: relative;
top: 25px;

Answer 2

您可以在容器内放置'position：absolute'的项目：

.username-heading {
  vertical-align: top;
  position: static;
}
.username-heading img {
  position: absolute;
  right: 0;
  width: 100px;
  height: 100px;
}

.username-heading h1 {
  position: absolute;
  top: 18px;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  font-size: 3.5rem;
  font-weight: bold;
  display: inline-block;
}

.username-heading {
  height: 120px;
  background: yellow;
}

.user-edit-button {
  position: absolute;
  right: 0;
  top: 120px;
  padding: 5px 5px 5px 5px;
  margin-top: -20px;
  margin-bottom: 1px;
}

请记住，'。username-heading'位置必须不是'static'。

Answer 3

这是你唯一需要的css ......这是pen

 .top-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: orangered;
}
img{
  height: 40px;
  border-radius: 50%;
}

如何在不使用保证金黑客的情况下获得徽标，标题和按钮。

3 个答案: