My case is as follows:
ButIwanttoleaveitlikethis:
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 :/
I leave two options, both using display: inline; .
The difference is that inline does not break line. display: block; inserts the line break you do not want.
Take the <input> from within <h1></h1> and put the header with display: inline; . You do not even need style=" display: table;" in <input> .
Example: link
Place style=" display: inline;" on <input> .
Example: link
And if you want to help the vertical position of <input> you can use this:
input {
position: relative;
top: -5px;
}
Example: link
SUGGESTION
For your case, you could simply use the sup and sub tags, unless you want to pass css p>
Here's an Example :
<div style="font-size: 40px;">
<span>Log</span><sub>4</sub><sup>64</sup> = 3
</div>
<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>