300 300 - 2 months ago 5
HTML Question

How to align twitter button and normal button horizontally?

I have a twitter button and a normal submit button and I am trying to align them horizontally (in same line).

But even after trying different combinations of margin on ".buttonLine", ".twitter-share-button" and "#newQuoteButton" they are never aligned horizontally.

All I want to do is align them horizontally (in same horizontal line) and then place the in left and right side.

Please suggest how I can do this.

Demo fiddle is at fiddle

Code:

<!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"/>
<style>
.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;
}
</style>
</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>
<script type="text/javascript">
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
}
</script>
</body>
</html>

Answer

Or try this fiddle:

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

#newQuoteButton {

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