简体   繁体   中英

Making two HTML buttons go side by side

Okay, I'm not very familiar with HTML, or how it comes together with CSS. I have been looking all over on how to make two HTML buttons go side by side. Here is the code I'm currently using.

<FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
  <input type="submit" value="Forum Home Page">
</FORM>
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
  <input type="submit" value="Skill Guides">
</FORM>

No matter if I put them right after each other or put an alignment infront of them. I can't seem to get them to go next to each other. I hope there is someone that can easily and in a detailed way, help me out.

If I understand you correctly, you can just attach the following CSS:

form {
    display: inline;
}

As shown here: http://jsfiddle.net/zcz3j/

Demo http://jsfiddle.net/satinder_singh1/wr4Xv/1/

<div id="main">
<div class="floatdiv"><FORM METHOD="LINK" ACTION="LINK TO WEBSITE" target="_blank">
  <input type="submit" value="Forum Home Page">
</FORM></div>
<div class="floatdiv">
<FORM METHOD="LINK" ACTION="LINK TO A DIFFERENT WEBSITE" target="_blank">
  <input type="submit" value="Skill Guides">
    </FORM></div></div>​

<style type="text/css">
    #main
    {
    position:relative;
        width:200px;
    }

    .floatdiv
    {
    float:left;
        width=80px
    }
</style>

You could also try wrapping them in a table tag. That's how I fixed my similar issue. The table automatically set them side by side.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM