ui-icon跨度不显示内联

发布于 2024-12-04 18:43:16 字数 448 浏览 0 评论 0原文

我试图将 jquery 主题中的 ui-icon 与文本框元素的右侧对齐，但没有成功。

我尝试过不同的浮动（向左浮动将其推到文本框的左侧，向右浮动将其一直推到父元素的末尾，这样它就不会紧挨着我的文本框），我尝试过显示：内联，我尝试过显示：内联块...似乎没有任何效果。

无论如何，跨度不应该只渲染内联的 html，就在我将其放在页面上的位置吗？

<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>

原文

I am trying to align a ui-icon from a jquery theme to the right of a textbox element with 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

百善笑为先 2024-12-11 18:43:16

您可以为 td 指定 class 或 id，并为该元素指定宽度。分配此宽度时应考虑图标大小。然后继续向右浮动。 Span 元素用于文本，那么为什么不为该图标使用图像标签呢？

<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>

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>

回复收藏 0 原文

~没有更多了~