Como alinhar content e colocar input lado a lado?

[snowstormdelivery 19]

O content (sorteador) está num CSS, então, eu não consigo alinhar ele. Como eu resolveria isso?

 

Como deveria ficar:

 

 

Segue o o código do CSS:

div::before {
    content:"Sorteador";
    font: 10pt Arial;
    font-weight: bold;
    color: white;
    background-color: #273747;
    padding: 5px;
    display: block;
    position: relative;
    top: -10px;
    left: -10px;
    width: 560px;
}

Agora, vamos aos inputs que, devido à estarem em forms diferentes, não consigo colocá-los lado a lado.

 

Olhem como deveria ficar:

 

 

 

Código HTML:

<form method="post" action="_modelohtml.html" >
    <input type="submit" value="Novo sorteio"/>
</form>
    <input type="submit" onClick="history.go(0)" value="Resortear"/>
    <input type="submit" value="Corrigir" onClick="history.go(-1)">
</div>
</body>
</html>
 

Eaí, gente?! Como eu resolvo esses dois casos simples?

[pmmartinelli 13]

Vamos lá...

 

Para o caso do "Sorteador", basta incluir no CSS o "text-align:center", isso resolverá.

div::before {
   content:"Sorteador";
   font: 10pt Arial;
   font-weight: bold;
   color: white;
   background-color: #273747;
   padding: 5px;
   display: block;
   position: relative;
   top: -10px;
   left: -10px;
   width: 560px;
   text-align:center;
}

Para os inputs, basta criar uma classe com "float:left" e aplicá-la aos inputs, conforme exemplo abaixo.

.float_left{
    float:left;
    margin-right: 5px
}


<form method="post" action="_modelohtml.html" >
<input type="submit" value="Novo sorteio" class="float_left"/>
</form>
<input type="submit" onClick="history.go(0)" value="Resortear" class="float_left"/>
<input type="submit" value="Corrigir" onClick="history.go(-1)" class="float_left">

Espero que isso te ajude.

 

Divirta-se!

[snowstormdelivery 19]

Eu usei CSS para posiciona-los sobre o que eu queria.