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目的を達成するには、すべてを 1 行に表示するのに十分な幅のラップを作成する必要があります。一般に、これは JavaScript なしでは簡単に実現できません。なぜなら、CSS はいくつかの要素を整列させるための初歩的なサポートしかないからです。

ソリューション:

  1. div常に 3 つの要素を含めることができるように、 を非常に広くします。入力フィールドを大きくしたい (= 利用可能なすべてのスペースを使いたい) 場合、これはラベルのせいで難しく、不可能です。

  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 のプロパティ inline-block を使用することもできます。疑問符が前の要素と同じ行に留まるように強制します。

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

コードの順序を維持するために、閉じ括弧を次の行に移動したことに注意してください。それでもかなり醜いです。

利点は、インライン コンテンツの 2 つの部分が一緒に属していることをブラウザーに指示するという点で "セマンティック" であることです。

于 2012-08-24T14:18:25.717 に答える