时间戳

首页 > 解决方案 > 如何在一行中设置几个项目

html - 如何在一行中设置几个项目

问题描述

我想将一些 HTML 元素放在一行中。这是我使用的代码。

 <input type = "text" className="search" placeholder="Search"></input>
              
                <a href="/">
                <img src="logo.svg"></img>
                <h3>NameOfTheWebsite</h3>
                </a>
            
          
              <a href = "#">SignIn</a>
              <a href = "#">SignOut</a>

但是这段代码的输出是这样的。

上述代码的输出

我想将这些元素放在同一行中，并且徽标应该位于网站名称的顶部。我如何实现这一目标？

标签： htmlcssreactjs

解决方案

FlexBox 在这种情况下非常有用。在下面的代码片段中，我使用了一些 flexbox 来让您熟悉它。但这是你绝对应该掌握并在你的 CSS 布局中使用的东西。MDN Web 文档有一个非常棒的教程。

.home-page{
  display:flex;
  margin:15px;
}
.controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.signing-buttons{
  display:flex;
}
.signing-buttons a{
  margin:5px;
  padding:10px;
  border:2px solid red;
  border-radius:4px;
}
<a class="home-page" href="/">
  
  <h3>NameOfTheWebsite</h3>
  <img src="logo.svg"></img>
</a>
<div class="controls">
  <input type = "text" className="search" placeholder="Search"></input>
  <div class="signing-buttons">
    <a href = "#">SignIn</a>
    <a href = "#">SignOut</a>
  </div>
</div>

推荐阅读