1

下のhtmlコードを変更せずに、cssの要素の前にブレークを追加しようとしています。このフォーラムで回答を探していましたが、さまざまなブラウザーで機能させることができませんでした。

joomlaHTML (コンポーネントの一部であるため、変更不可)

    <span id="mod_login_usernametext-map"> <label for="mod_login_username-map"> Email </label> </span>

    <span><input type="text" name="username" id="mod_login_username-map" class="inputbox-map" /></span>

    <-- here i want the break -->

    <span id="mod_login_passwordtext-map"><label for="mod_login_password-map">Password</label></span>&nbsp;<span><input type="password" name="passwd" id="mod_login_password-map" class="inputbox-map" />

    <-- and break here -->
    <input type="checkbox" name="remember" id="mod_login_remember-map" class="inputbox-map" value="yes" /> <span id="mod_login_remembermetext-map"><label for="mod_login_remember-map">Remember me</label></span>

試してみましたが、#mod_login_passwordtext-map:before { content: '\A';white-space: pre-line; }うまくいきませんでした。firefoxchrome

を使用display: breakしても、入力ボックスは同じレベルに配置されません..ラップ要素を追加できれば最も簡単でしたが、それはできません..

任意のヒント？

4

2 に答える 2

2

#mod_login_passwordtext-mapに設定しないのはなぜdisplay:blockですか？または、マークアップでフロート/クリアを行うこともできます。

http://jsfiddle.net/TUGCX/1/

#mod_login_passwordtext-map {
    clear:both;
}

span {
    float:left;
}

/* You don't need that. */
input {
    display:inline-block;
    margin-left:5px;
}

注 : display: breakは有効な css ではありません!

于 2012-09-24T08:50:33.790 に答える
2

このcssで試してください：

#mod_login_passwordtext-map:before {
  content: '\A';
  white-space: pre;
}

デモ:コードペン

私にとってはFFとChromeでうまく機能します。

よろしくお願いします

編集：

これにより、ログインボタンにもブレークが追加されます+ 2つのinputフィールドが整列します:

#mod_loginform-map #mod_login_passwordtext-map:before,
#mod_loginform-map .cbLoginButtonSpan:before {
  content: '\A';
  white-space: pre;
}

#mod_login_usernametext-map label,
#mod_login_passwordtext-map label {
  display: inline-block;
  width: 6em;
}

デモ:コードペン

編集2：

要素:beforeに:after疑似クラスを追加することはできません。input

なんで？

要素の内容:beforeの前に追加され、要素自体の前後ではなく、要素の内容の後に追加されるためです。:after

入力要素にはコンテンツがなく、値のみがあります。

お役に立てれば。

編集3：

CSS を使用して新しい行を取得するには、Remember me inputの方法が 1 つしかありません。

#mod_loginform-map #mod_login_passwordtext-map:before,
#mod_loginform-map .cbLoginButtonSpan:before,
#mod_loginform-map span:nth-child(4):after {
  content: '\A';
  white-space: pre;
}

デモ:コードペン

しかし、この回避策は私の目には少し安っぽいです。

よろしくお願いします

于 2012-09-24T08:41:03.183 に答える