Place button side by side

6

Hello I wanted to have a back button and another to go to the analysis, when I go to see the site they always appear in one down and another up.

My code is:

 <a href="guardadorrebanhos.html">
      <p align="center"><input type="button" name="botao-voltar" value="Voltar">
 </a>

 <a href="guardadorrebanhos.html">
      <p align="center"><input type="button" name="botao-analise" value="Análise">
 </a>

And I do not like tossing side by side.

    
asked by anonymous 02.03.2015 / 10:29

3 answers

5

You have some problems with your current code:

Elements inside the link tag:

The <button/> element can not be within the <a/> element so it can be read in the documentation at: HTML5 Spec Document from W3C :

  

Content model: Transparent , but there must be no interactive content descendant.

     

The element may be wrapped around paragraphs, lists, tables, and so forth, even between sections, so long as there is no interactive content within (e.g. buttons or other links).

What translated:

  

Content template: transparent , but there should be no interactive content downlink.

     

The element can be wrapped around integer paragraphs, lists, tables, and so on, even entire sections, as long as there is no interactive content within it (eg buttons or other links). >

Close the tags

The <p/> elements are not closed, which is why your code does not generate HTML in the way you want it to.

Solution

You can put both links within a paragraph and format with CSS to get the look you want:

a{
    display:inline-block;
    text-decoration:none;
    padding:6px 4px;
    border:1px solid #ccc;
    background-color:#f2f2f2;
    color:#333;
    font:15px arial, sans-serif;
}
a:hover{
    border-color:#aaa;
}
<p>
    <a href="guardadorrebanhos.html">
        voltar
    </a>
    <a href="guardadorrebanhos.html">
        análise
    </a>
</p>
    
02.03.2015 / 15:55
3

Do not apply a <input> tag inside a <a> tag and in this case it is only necessary by the buttons in a table:

<table border="1">
   <tr>
     <td>
        <input type="button" name="botao-voltar" value="Voltar">
     </td>
     <td>
       <input type="button" name="botao-analise" value="Análise">
     </td>
   </tr>
  </table>
    
02.03.2015 / 14:24
0

Use the bootstrap

Just add your css and their classes to your components.

<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  </head>
  <body>
    <a class="btn btn-primary" href="guardadorrebanhos.html">Voltar</a>
    <a class="btn btn-primary" href="guardadorrebanhos.html">Análise</a>  
  </body>
</html>

Live demo

    
02.03.2015 / 15:20