使用CSS生成非破坏性内容

Question

我想在任何时候将字段和图标（问号）保持在同一行，即使宽度减小也是如此。 （最好使用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>

我正在使用HTML5和jQuery Mobile。

Answer 1

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

要实现您想要的效果，您需要使div将所有内容包裹得足够宽，以便在一行中显示所有内容。在一般情况下，如果没有JavaScript，这并不容易实现，因为CSS只对基准调整了几个元素。

解决方案：

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

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

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

Answer 2

你可以尝试几件事。表格最丑陋的版本。它也是最容易的。 它会看起来像这样。

     <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中的propperty inline-block。它强制使questionmark与前一个元素保持同一行。

display: inline-block;

希望这会对你有所帮助。

Answer 3

这不是很好，但是当你使用不间断的空间时会发生什么？

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

请注意，我将结束括号移动到下一行，以尝试对代码保持某种顺序。虽然很难看。

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