将 html 元素排成一行

Question

我正在使用 reactJS。 在这种形式中，我试图有一个文本字段，然后是一个按钮以单击该按钮以将该文本复制到点击板以及一个将您带到该网站的超链接（如果它是一个有效的网站）。

正如您应该能够在屏幕截图中看到的那样，复制按钮和超链接并没有很好地对齐。一个低于另一个并与其他元素发生碰撞。 Screenshot

我希望能够连续排列 - 请参阅下面的 html 和 CSS： .html

<div>
  <div className="link">
    <InputField
      disabled={this.state.disabled}
      placeholder={this.props.placeholder}
      title={this.props.title}
      value={this.props.value}
      change={e => this.props.change(e)}/>
    </div>
    <div className="copy-button">
      <button onClick={(e) => this.copyToClipboard(e)}>C</button>
    </div>
    <div id="link-button">
      <a className="link-button" target="_blank" rel="noopener noreferrer" href={this.props.value}>Visit</a>
    </div>
</div>

.CSS

.link {
    width:80%;
    float:left;
    height:35px;
}
.link-button {
    width:5%;
    float:left;
    padding-left:10px;
    height:35px;
}
.copy-button {
    width: 5%;
    float:left;
    padding-left: 10px;
    height:35px;

}

Answer 1

首先，稍微改变一下你的 HTML 结构。给父容器一个类名。它看起来像这样-

<div class="parent_class">
   <div className="link">
      <InputField
         disabled={this.state.disabled}
         placeholder={this.props.placeholder}
         title={this.props.title}
         value={this.props.value}
         change={e => this.props.change(e)}
      />
   </div>
   <div className="copy-button">
      <button onClick={(e) => this.copyToClipboard(e)}>C</button>
   </div>
   <div id="link-button">
      <a className="link-button" target="_blank" rel="noopener noreferrer" href={this.props.value}>Visit</a>
   </div>
</div>

现在，您可以使用以下 CSS 将它们放在同一行中。使父显示弯曲。看起来像这样-

.parent_class{
   display: flex;
   flex-wrap: nowrap;
}

因此，每个项目现在都在同一行中。现在，您为单个项目设置不同的宽度。它看起来像下面的代码-

.link {
   width:80%;
 }
 .link-button {
   width:5%;
 }
 .copy-button {
   width: 5%;
 }

您还可以放置其他 CSS 属性，例如内边距、高度等。