我使用的是ReactJS。在这个表单中，我尝试有一个文本字段，后面跟着一个按钮，可以点击将该文本复制到点击板，还有一个超链接，可以将您带到该网站（如果它是一个有效的网站）。
正如你应该能够看到的屏幕截图，复制按钮和超链接没有很好地排队。一个比另一个低，并与其他元素发生碰撞。截图
我想把它排成一行-请看下面我的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;
}
首先，稍微改变一下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属性，如填充，高度等。
