css 如何将此图片上移到文本“EMAIL：“旁边

bxfogqkk 于 2023-02-06 发布在其他

关注(0)|答案(2)|浏览(205)

我想将照片移动到网站顶部，旁边的文字："EMAIL："使用HTML + CSS创建BITLAB新闻布局网页

.top-bar {
  background-color: #00008B;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.top-bar .left {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.top-bar .right {
  color: white;
}

.login-bar {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}

.login-bar .left {
  color: black;
}

.input {
  padding-left: 10px;
  margin-bottom: 20px;
}

.password-bar {
  display: flex;
  justify-content: flex-start;
}

.password-bar .left {
  color: black;
  padding-left: 10px;
}

.input2 {
  padding-left: 10px;
  padding-top: 10px;
}

.button {
  background-color: green;
  margin-top: 20px;
  margin-left: 10px;
  color: white;
  width: 60px;
  border-radius: 5px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.blue {
  color: #0000FF;
}

.center {
  float: left;
  width: 33.33%;
  padding: 5px;
  margin-left: 300px;
  margin-bottom: 800px;
}

<div class="top-bar">
  <div class="left">BITLAB NEWS</div>
  <div class="right">About&nbsp;&nbsp;&nbsp;&nbsp; Contacts&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp; Login&nbsp;&nbsp;</div>
</div>

<body>
  <div class="login-bar">
    <div class="left">EMAIL :</div>
  </div>
  <div class="input"><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
  </div>
  <div class="password-bar">
    <div class="left">PASSWORD :</div>
  </div>
  <div class="input2"><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
  </div>
  <div class="button">
    <div class="signin-btn">SIGN IN</div>
  </div>
  <p>&nbsp;&nbsp;&nbsp;I want to create <span class="blue">new account</span></p>
  <div class="center">
    <p>Boeing 777: Dozens grounded after Denver engine failure</p>
    <img src="3a.jpg" style="width: 100%;">
  </div>
</body>

css

来源：https://stackoverflow.com/questions/75352022/how-to-move-up-this-picture-next-to-the-text-email

2条答案

按热度按时间

ozxc1zmp1#

尝试使用flexbox

.top-bar {
  background-color: #00008B;
  color: white;
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.top-bar .left {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.top-bar .right {
  color: white;
}

.login-bar {
  display: flex;
  justify-content: flex-start;
  padding: 10px;
}

.login-bar .left {
  color: black;
}

.input {
  padding-left: 10px;
  margin-bottom: 20px;
}

.password-bar {
  display: flex;
  justify-content: flex-start;
}

.password-bar .left {
  color: black;
  padding-left: 10px;
}

.input2 {
  padding-left: 10px;
  padding-top: 10px;
}

.button {
  background-color: green;
  margin-top: 20px;
  margin-left: 10px;
  color: white;
  width: 60px;
  border-radius: 5px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  padding: 10px;
}

.blue {
  color: #0000FF;
}

.login-flex{
  display: flex;
}

<body>
  <div class="top-bar">
    <div class="left">BITLAB NEWS</div>
    <div class="right">About&nbsp;&nbsp;&nbsp;&nbsp; Contacts&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp; Login&nbsp;&nbsp;</div>
  </div>
  <div class="login-flex">
    <div class="login-container">
    <div class="login-bar">
      <div class="left">EMAIL :</div>
    </div>
    <div class="input"><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
    </div>
    <div class="password-bar">
      <div class="left">PASSWORD :</div>
    </div>
    <div class="input2"><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
    </div>
    <div class="button">
      <div class="signin-btn">SIGN IN</div>
    </div>
    <p>&nbsp;&nbsp;&nbsp;I want to create <span class="blue">new account</span></p>
    </div>
    <div class="right-side">
      <p>Boeing 777: Dozens grounded after Denver engine failure</p>
      <img src="3a.jpg" style="width: 100%;">
    </div>
   </div>
</body>

赞(0）回复(0）举报 2023-02-06

am46iovg2#

我不太确定您想要的定位，但您可以使用显示器轻松获得结果：弹性
你可以在css-tricks上查看一些相关文档，然后用这个快速的迷你游戏flexboxfrogy练习，这样你就可以得到你想要的结果。

.top-bar {
    background-color: #00008B;
    color: white;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

.top-bar .left {
    color: white;
    font-weight: bold;
    font-size: 20px;
}

.top-bar .right {
    color: white;
}

.login-bar {
    display: flex;
    width: 90%;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    padding: 10px;
}

.login-bar .left {
    color: black;
}

.input {
    padding-left: 10px;
    margin-bottom: 20px;
}

.password-bar {
    display: flex;
    justify-content: flex-start;
}

.password-bar .left {
    color: black;
    padding-left: 10px;
}

.input2 {
    padding-left: 10px;
    padding-top: 10px;
}

.button {
    background-color: green;
    margin-top: 20px;
    margin-left: 10px;
    color: white;
    width: 60px;
    border-radius: 5px;
    height: 15px;
    font-size: 12px;
    text-align: center;
    padding: 10px;
}

.blue {
    color: #0000FF;
}

<div class="top-bar">
  <div class="left">BITLAB NEWS</div>
  <div class="right">About&nbsp;&nbsp;&nbsp;&nbsp; Contacts&nbsp;&nbsp;&nbsp;&nbsp; FAQ&nbsp;&nbsp;&nbsp;&nbsp;
    Login&nbsp;&nbsp;</div>
</div>
<body>

  <div class="login-bar">
    <div>
      <div class="left">EMAIL :</div>
      <div class="input"><input type="text" placeholder="Insert Email" style="width:200px; height: 25px;">
      </div>
      <div class="password-bar">
        <div class="left">PASSWORD :</div>
      </div>
      <div class="input2"><input type="text" placeholder="Insert Password" style="width:200px; height: 25px;">
      </div>
      <div class="button">
        <div class="signin-btn">SIGN IN</div>
      </div>
      <p>&nbsp;&nbsp;&nbsp;I want to create <span class="blue">new account</span></p>
    </div>
    <div>
      <p>Boeing 777: Dozens grounded after Denver engine failure</p>
      <img src="https://nationwideradiojm.com/wp-content/uploads/2021/02/Capture-2.jpg" style="width: 120px;">
    </div>
  </div>

</body>

赞(0）回复(0）举报 2023-02-06

我来回答

css 如何将此图片上移到文本“EMAIL：“旁边

2条答案

相关问题

热门标签

最新问答