时间戳

首页 > 解决方案 > 如何让我的元素内联在左上角？

html - 如何让我的元素内联在左上角？

问题描述

元素 2 是 youtube 徽标的图像。元素 1 是一个具有视觉悬停效果的按钮，三个条相互堆叠。我想要左边的按钮和旁边的图像。我需要它们在左上角。

这是迄今为止的截图https://postimg.cc/Mn2B8wCR

这是我到目前为止的代码

.element1 {
  display: inline-block;
  width: 500px;
}

.element2 {
  display: inline-block;
  width: 500px;
}

.wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hamburger {
  width: 100px;
  height: 100px;
  position: relative;
  cursor: pointer;
  background: #636363;
  border-radius: 5px;
}

.hamburger>div {
  position: absolute;
  height: 10px;
  background: rgb(255, 255, 255);
  border: 5px;
}

.first {
  width: 55px;
  top: 25px;
  left: 20px;
}

.second {
  width: 40px;
  top: 45px;
  left: 20px;
}

.third {
  width: 50px;
  top: 65px;
  left: 20px;
}

.hamburger:hover div {
  width: 60px;
  transition: width 0.3s ease;
}
<div class="element1">
  <div class="wrapper">
    <div class="hamburger">
      <div class="first"></div>
      <div class="second"></div>
      <div class="third"></div>
    </div>
  </div>
</div>


<div class="element2">
  <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
</div>

标签： htmlcss

解决方案

您可以将其包装在 a 中container并使用display: flex;.

.nav-container{
    display: flex;
    width: 100%;
}

.element1{
    display: inline-block;
    width: 120px;

}

.wrapper{
  padding-left: 10px;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hamburger{
    width: 100px;
    height: 100px;
    position: relative;
    cursor: pointer;
    background: #636363;
    border-radius: 5px;

}

.hamburger > div{
    position: absolute;
    height: 10px;
    background: rgb(255, 255, 255);
    border: 5px;
}
.first{
    width: 55px;
    top: 25px;
    left: 20px;
}
.second{
    width: 40px;
    top: 45px;
    left: 20px;
}
.third{
    width: 50px;
    top: 65px;
    left: 20px;

}
.hamburger:hover div{
    width: 60px;
    transition: width 0.3s ease;
}

.element2{
    display: inline-block;
    width: 500px;
}
<div class="nav-container">
    <div class="element1">
        <div class="wrapper">
            <div class="hamburger">
                <div class="first"></div>
                <div class="second"></div>
                <div class="third"></div>
            </div>
        </div>
    </div>
    <div class="element2">
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Logo_of_YouTube_%282015-2017%29.svg" alt="Youtube logo" class="logo">
    </div>
</div>

推荐阅读