如何将我的输入字段和按钮向上对齐以使其与其他按钮内联？答案

【问题标题】：How would I align my input field and button upward to make it inline with other buttons?如何将我的输入字段和按钮向上对齐以使其与其他按钮内联？
【发布时间】：2019-01-10 12:32:13
【问题描述】：

我想以响应方式将我的按钮直接向上移动，以便使用 Bootstrap 与 iOS 和 Android 按钮内联。

我在下面的代码中的尝试给了我提供的屏幕截图，但不是我想要的输出

我在整个 SO 和网络上尝试了很多东西，但似乎没有任何效果。我会从外部添加一些 CSS，但我觉得它不会像它应该的那样响应。我一定是忽略了一些微不足道的事情。

我做错了什么？

import React from 'react';

const footer = () => {
    return(
        <footer className="container">
            <div className="col-md-6 col-sm-12 center">
                <img className="iosBtn imgCenter img-responsive" src="https://website.com/images/website/Home/iphone.png?v=6.97"/>
                <img className="img-responsive" src="https://website.com/images/website/Home/google_play.png?v=6.97"/>
            </div>

            {/* I want to move this upward */}
            <form className="form-inline float-right">
                <div className="form-group mx-sm-3 mb-2">
                    <input className="form-control" placeholder="Enter Email"/>
                </div>
                <button type="submit" className="btn btn-primary mb-2">Submit</button>
            </form>

            <hr/>

            <div className="row text-center">
            <div className="col-sm">
            <a href="#">WINNERS</a>
            </div>
            <div className="col-sm">
            <a href="#">BLOG</a>
            </div>
            <div className="col-sm">
            <a href="#">FAQ</a>
            </div>
            <div className="col-sm">
            <a href="#">SWEEPSTAKES</a>
            </div>
            <div className="col-sm">
            <a href="#">CONTACT US</a>
            </div>
            <div className="col-sm">
            <a href="#">TERMS</a>
            </div>
            </div>

            <br/>

            <div className="text-center">
            <a href="#" className="btn btn-sm btn-link fa fa-facebook"></a>
            <a href="#" className="btn btn-sm btn-link fa fa-instagram"></a>
            <a href="#" className="btn btn-sm btn-link fa fa-youtube"></a>
            <a href="#" className="btn btn-sm btn-link fa fa-twitter"></a>
            <p className="text-center">website</p>
            </div>
        </footer>
    );
};

export default footer;

【问题讨论】：

标签： javascript css reactjs debugging bootstrap-4

【解决方案1】：

从您的 html 来看，该表单应用了 float: right; 样式，这导致了奇怪的行为。

我建议改用flexbox：

footer {
  display: flex;
  width: 100%;
}

form {
  display: flex;
  align-items: center;
  margin-left: auto;
}

<footer>
  <div>
    <img src="https://via.placeholder.com/140x100">
    <img src="https://via.placeholder.com/140x100">
  </div>
  <form>
    <input type="text">
    <input type="submit" value="submit">
  </form>
</footer>

【讨论】：

【解决方案2】：

将您的div 与图像和form 封装在一个div 中。并在两者上玩display: inline-block 和float: left。如果没有任何效果，请尝试将 form 也用另一个 div 包裹起来，然后将 inline-block 放在那里。

见sample code

【讨论】：