Css alignments

Question

My case is this::

But I want to leave it at that:

HTML

    <div id="problema">

    <div id="verificar" style="width: 500px; height: 100px;">

    <h1  style=" clear: both;position: relative; display: table; " >Log<sub>4</sub> <sup>64</sup> = 
    <input style=" display: table;" type="text" id="valor_total" /></h1>

    </div>
    </div>

CSS

 // Não sei o css que deverei usar :D
 // já tentei vários :/

Answer 1

I leave two options, both using the display: inline;.
The difference is that the inline does not break line. The display: block; inserts the line break you don’t want.

#1

Take out the <input> from within the <h1></h1> and put the header with display: inline;. Then you don’t even need style=" display: table;" in the <input>.

Example: http://jsfiddle.net/bLN2Z/2/

#2

Place style=" display: inline;" in the <input>.

Example: http://jsfiddle.net/bLN2Z/1/

---

And if you want to help the vertical position of <input> you can use it like this:

input {
    position: relative;
    top: -5px;
}

Example: http://jsfiddle.net/bLN2Z/3/

Answer 2

SUGGESTION

In your case you could just use the tags sup and sub, unless you want to go through css.

Here’s a Example :

<div style="font-size: 40px;">
    <span>Log</span><sub>4</sub><sup>64</sup> = 3
</div>

Answer 3

<div id="verificar">
    <h1  style=" clear: both;position: relative; display: table; " >Log<sub>4</sub> <sup>64</sup> =     
</div>
<div id="campo">
    <input style=" display: table;" type="text" id="valor_total" /></h1>
</div>

<style type="text/css">
    #verificar{
        width: 125px;
        height: 100px;
        float: left;
    }
    #campo{
        float: left;
        margin-top: 32px;
    }

</style>