将span元素对齐div的左侧

Question

Is it possible to align the span "Header" in this fiddle : http://jsfiddle.net/25LjE/37/ to right of text as shown :

I'm creating the header using jquery.

Here is the fiddle code :

<script type="text/javascript" charset="utf-8" src="http://static.polldaddy.com/p/6352993.js"></script>
<noscript><a href="http://polldaddy.com/poll/6352993/">This is very long test question to test how polldaddy handles questions that exceed that normal length............ yes a very long question indeed..............</a></noscript>

.pds-pd-link {
display: none !important;
}
.pds-box {
    width: 220px !important;
}
.pds-input-label{
    width: auto! important;
}
.PDS_Poll{
    margin-bottom:15px;
}
$(document).ready(function() {

    $('.pds-question-inner').prepend('<center><span style="color:red;font-weight:bold;font-size: 10pt"><u>Header</u></span></center>');
});

When I try proposed solutions in IE8, the text is slightly higher than rest of text :

Can this be fixed ?

Answer 1

It is not really clear to me what you are trying to achive, but adding this CSS seems to get this done:

center span{
    position:relative;
    top:30px;
    left:-70px;
}

Answer 2

You can do that by wrapping your two elements both in a div which float left, then you can append instead of prepend the header.

<div class="floatLeft">Your two elements</div>

<style>
.floatLeft {
    float: left;
    display: inline-block;
}
</style>

You may want to set a width and padding/margin on the elements as well so they come out as desired. If you want the header way to the right you can float it right instead of left. If you do that stick with the prepend because some versions of IE screw up floats if the right floating elements are not first in the series.

Answer 3

You just have to add float:left in

<span style="color:red;font-weight:bold;font-size: 10pt;float:left"><u>Header</u></span>

Check this:

JSFiddle

Answer 4

看看这个代码在小提琴我编辑它http://jsfiddle.net/25LjE/46/

Answer 5

I think this is what you want?

$('.pds-question-inner').prepend('<center><span style="color:red;font-weight:bold;font-size: 10pt; text-align: right; display: block;"><u>Header</u></span></center>');

http://jsfiddle.net/84fjB/

If not it should be, looks better :P

Answer 6

You can add float: left to the span (and clean up your HTML).

You can check this: http://jsfiddle.net/ooflorent/zvbzT/