0

即使宽度减小，我也想随时将字段和图标（问号）保持在同一行。（最好使用 CSS）

我尝试了各种选项，例如white-space: nowrap将它们放在相同的位置<div/>，但没有成功。

在此处输入图像描述

编辑

我的 HTML 标记类似于以下内容：

<ul data-role="listview" >
            <li data-role="fieldcontain">
                <div>
                    <label for="name">*Email</label>
                    <input type="text" name="name" id="name" />
                    <img src="help.png" title="title" alt="help"/>
                </div>
            </li>
        </ul>

我在 jQuery Mobile 中使用 HTML5。

4

3 回答 3

4

white-space: nowrap对元素没有影响，它只是告诉浏览器不要拆分纯文本节点。

要实现您想要的，您需要使div包装所有内容足够宽以在一行中显示所有内容。在一般情况下，如果没有 JavaScript，这并不容易实现，因为 CSS 仅对对齐多个元素提供基本支持。

解决方案：

  1. 使div宽度如此之大，以至于它始终能够包含三个元素。由于标签的原因，这很难，如果您希望输入字段增长（= 使用所有可用空间），这是不可能的。

  2. 给出div一个足够宽以包含图像的右边距，然后将其绝对定位在空白空间中。缺点：很难垂直对齐图像。

  3. 完美运行但没人愿意听到的解决方案：使用表格，因为表格行可以满足您的需求。

于 2012-08-24T14:12:53.757 回答
1

你实际上可以尝试几件事。最丑的版本是桌子。它也是最简单的一种。它看起来像这样。

     <table>
         <tr>
             <td><label for="name">*Email</label></td>
             <td><input type="text" name="name" id="name" /></td>
             <td><img src="help.png" title="title" alt="help"/></td>
         </tr>
     </table>

您也可以尝试在问号样式属性中使用 CSS 中的属性内联块。它强制问号与前一个元素保持在同一行。

display: inline-block;

希望这可以帮助你。

于 2012-08-24T14:18:58.223 回答
0

这并不漂亮，但是当您使用不间断空间时会发生什么？

<input type="text" name="name" id="name"
/>&nbsp;<img src="help.png" title="title" alt="help"/>

请注意，我将右括号移到下一行以尝试保持代码的某种顺序。不过还是很丑。

好处是它是“语义的”，因为您正在指示浏览器这两个内联内容属于一起。

于 2012-08-24T14:18:25.717 回答