ui-icon span not displaying inline_问答_开发者

开发者 https://www.devze.com 2023-04-04 22:41 出处：网络

I am trying to align a ui-icon from a jquery theme to the right of a textbox element with开发者_如何学C no luck.

I've tried different floats (floating left pushes it to the left side of my textbox, floating right pushes it all the way to the end of my parent element so it doesn't sit snug next to my textbox), I've tried display:inline, I've tried display:inline-block...nothing seems to work.

Shouldn't a span just render the html inline anyway, right where I put it on the page?

<td><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><span class="ui-icon ui-icon-help ui-state-default" id="tbHelp" style="inline-block;" title="What's This?"></span></td>

You could assign class or id to the td and assign width to this element. This width should be assigned taking in mind the icon size. Then proceed with float right. Span elements are used for text so why don't you use image tag for this icon?

<head>
        <style type="text/css">
            .tdd{
                width: 50px;
                height: 20px;
                background-color: blue;
            }
        </style>
    </head>
<body>
    <table>
    <td class="tdd"><input type="text" maxlength="4" name="tb" id="tb" style="width:30px;" /><img src="img/bgFlag.png" width="16" height="16" class="ui" id="tbHelp" style="inline-block;" title="What's This?"></td>
    </table>