1

要素を別の行にプッシュしたり、含む要素の幅を手動で設定したりせずspanに、要素の右側にaを配置しようとしています。adiv

white-space、、、などのさまざまな組み合わせを試しましたがposition、これを機能させることができません。floattext-align

問題の例を次に示します。

http://jsfiddle.net/QgzbY/2/

「Ctrl+Shift +S」が「名前を付けてドキュメントを保存」の下の行にあることに注意してください。これを同じ行に配置し、上の行のように右に揃えます。つまり、ショートカットテキストに合わせるには、包含要素の幅を増やす必要があります。

簡単に言うと、コンテンツを常に1行に保ちながら、要素を親要素の右側にフロートさせるにはどうすればよいですか？

CSSを使用してこれを達成できない場合は、Javascriptを手伝ってくれる時間を無駄にしないでください。スタックには、助けを必要とする人がもっとたくさんいて、この部分を自分で書くことができます。私はそれが必要ではないことを望んでいました:-)

4

4 に答える 4

1

<p>「名前を付けてドキュメントを保存」テキストの周りにタグを追加し、特定の要素に ID を追加して、変更/影響がわかるようにしました。修正したのは 1 行だけなので、変更内容を確認して残りの行も修正できます。

基本的に、 のフロートを削除し、.shortcutブロック/フロートを img と の中に残して表示します<a>。複雑なセレクターではなく ID を使用してこれを行ったので、何をしているかがわかります。

.shortcut {
    float: none !important; // over riding your declaration elsewhere
}

#lol, #lolimg {
    display: block;
    float: left;
}

デモ

于 2013-01-30T12:45:00.163 に答える
0

これを見てくださいこれはあなたが必要ですか？

<li>
    <a href="javascript:void(0)" class="key-ctrl-s">
       <img src="//beta.example.net/_images/_icons/save-20x20.png"/>
       <span class="text-hint">Save Document</span>
       <span class="shortcut">Ctrl+S</span></a>
    </li>

CSS

.text-hint{display: inline; float: left;}
.shortcut{display:inline;float:right;}

http://jsfiddle.net/LFkkL/

于 2013-01-30T12:37:51.477 に答える
0

ご回答ありがとうございます。残念ながら、私が達成しようとしていたことは、メニューの幅を操作しないと不可能のようです。これもありかなと思いました(-_-;)

とにかく、すべてのヒントをありがとう

于 2013-01-30T13:19:40.030 に答える
0

位置属性を活用して、一見の価値のあるものを実現しました。親に相対位置を与え、その子に絶対位置を与え、正しい値を使用して適切な位置に設定します。

さらに、下の行の幅も増やしました

.win_menu li {
    display:block !important;
    float:none !important;
    padding:0 !important;
    margin:0 !important;
    height:20px !important;
    min-width:200px !important;
    white-space:nowrap !important;
    border:1px solid transparent !important;
    z-index:10 !important;
}

デモ

于 2013-01-30T12:44:40.277 に答える