All geek questions in one place

Two buttons side by side

I am trying to make two button hyperlinks go side by side. I saw this question , but can't get the answers to work. Below are my two attempts to make the buttons go side by side. The first attempt works, but the hyperlinks to the wrong location. The second hyperlink is correct, but not side by side. The third one based on this question is not linked anywhere, but I think that this is due to the use of links instead of Javascript:submitRequests() .

 <!DOCTYPE html> <html> <body> <head> <style> .container { overflow: hidden; } button { float: left; } button:first-child { margin-right: 5px; } </style> </head> <form action="http://trinker.imtqy.com/qdap_dev/paste2.html" target="_blank"> <input type="submit" value="paste2"> </form> <form action="http://trinker.imtqy.com/qdap_dev/colSplit.html" target="_blank"> <input type="submit" value="colSplit"> </form> Attempt 1 <form action="http://trinker.imtqy.com/qdap_dev/paste2.html" target="_blank"> <input type="submit" value="paste2"> <form action="http://trinker.imtqy.com/qdap_dev/colSplit.html" target="_blank"> <input type="submit" value="colSplit"> </form> </form> Attempt 2 <form action="http://trinker.imtqy.com/qdap_dev/paste2.html" target="_blank"> <input type="submit" value="paste2"> </form><form action="http://trinker.imtqy.com/qdap_dev/colSplit.html" target="_blank"> <input type="submit" value="colSplit"> </form> Attempt 3 <div class="container"> <button onclick="http://trinker.imtqy.com/qdap_dev/paste2.html">paste2</button> <button onclick="http://trinker.imtqy.com/qdap_dev/colSplit.html">colSplit</button> text </div> </body> </html>
+6
source share
4 answers

If you just need simple links to work, just use the links and create them to look like buttons (see also Stacking the anchor tag to look like a submit button )

 <style> .button { appearance: button; -moz-appearance: button; -webkit-appearance: button; text-decoration: none; font: menu; color: ButtonText; display: inline-block; padding: 2px 8px; } </style> <div class="container"> <a href="http://trinker.imtqy.com/qdap_dev/paste2.html" class="button">paste2</a> <a href="http://trinker.imtqy.com/qdap_dev/colSplit.html" class="button">colSplit</a> text </div>

You can also do <a href="..."><button>paste2</button></a> , but this is not entirely legal HTML5 . FWIW, Firefox seems to be doing it right, though.

+7
source

button automatically lined up since they are by default display: inline-block (I think). I remove float: left , as this may cause some nesting problems.

You should never nest forms. This will lead to some really crazy things.

However, if you want the two forms to be side by side, you can force them to do this by adding display: inline to them. Here is a small demo: http://jsbin.com/UgaMiYu/1/edit

The onclick attribute should not have any meaning.

+3
source

I just tried adding css for attempt 2. how about this:

HTML:

 <form action="http://trinker.imtqy.com/qdap_dev/paste2.html" target="_blank"> <input type="submit" value="paste2"/></form> <form action="http://trinker.imtqy.com/qdap_dev/colSplit.html" target="_blank"> <input type="submit" value="colSplit"/> </form>

CSS

 form{ float:left; }

DEMO: http://jsfiddle.net/uzDZN/

NOTE. Add a class to the form that has these buttons. Otherwise, css may affect other form elements on the website.

+2
source

Using regular buttons and adjusting their display properties for an inline or inline box worked for me.

0
source

Source: https://habr.com/ru/post/951930/

More articles:


All Articles