html - 使用 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. 完美但没人想听的解决方案:使用表格，因为表格行可以满足您的需求。