Question

我有一个推特按钮和一个正常的提交按钮，我试图水平对齐它们（在同一行）。

但即使在＆＃34; .buttonLine＆＃34;，＆＃34; .twitter-share-button＆＃34;上尝试不同的保证金组合之后和＆＃34; #newQuoteButton＆＃34;它们永远不会水平对齐。

我想做的就是将它们水平对齐（在相同的水平线上），然后放置在左侧和右侧。

请建议我如何做到这一点。

演示小提琴是fiddle

代码：

＆＃13;

window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));

function myFunction() {
  //nothing
}

＆＃13;

.my-content {
  background-color: light-blue;
  margin: 250px 50px 100px 50px;
  border-radius: 10px;
}
.quote {
  margin: 0px 50px 0px 50px;
  text-align: center;
}
.quoteBy {
  margin: 0px 25px 0px 0px;
  text-align: right;
}
.buttonLine {
  margin: 50px 0px 0px 0px;
}
.twitter-share-button {
  margin: 0px 0px 0px 50px;
}
#newQuoteButton {
  margin: 0px 200px 100px 0px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
  <title>PageTitle</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

</head>

<body>
  <div class="container-fluid">
    <div class="my-content">
      <h1 class="quote" id="idQuote">Quick Brown Fox Jumped Over The Lazy Dog! Quick Brown Fox Jumped Over The Lazy Dog!</h1>
      <h4 class="quoteBy" id="idQuoteBy">....The Quick Fox</h4>
      <div class="buttonLine" style="clear:both">
        <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Hello%20world" data-size="large">Tweet</a>
        <button id="newQuoteButton" onclick="myFunction()">New Quote</button>
      </div>
    </div>

    <footer>
      <p class="text-center">Compiled by: Someones Name</p>
    </footer>
  </div>

</body>

</html>

＆＃13;

Answer 1

试试这个！

  #newQuoteButton {
    position: relative;
    bottom: 10px;
  }

Answer 2

或试试这个小提琴：

https://jsfiddle.net/e_neko/uhqv3ye8/4/

#newQuoteButton {

    display: inline-block;
    vertical-align: top;
    margin-top: 5px;
}

Answer 3

推特让你基本上无法控制他们的按钮，所以你需要转移你的按钮才能匹配。您可以通过将其vertical-align值设置为在您需要的位置排列的数字来执行此操作。试试这个：

#newQuoteButton {
  vertical-align: 0.5em;
}

如何水平对齐twitter按钮和普通按钮？

3 个答案: