1

ユーザーがプラスボタンをクリックすると、モーダルウィンドウが表示されるアプリケーションがあります。

問題は、ウィンドウの右側、「前の質問」の見出しと同じ行に閉じるボタンを表示することです。しかし、まったく右に動いていないようです。私は何を間違っていますか？

以下はコードです：

HTML:

<div class="previouslink">
<h1>PREVIOUS QUESTIONS</h1>

<button type="button" id="close" onclick="return closewindow();">Close</button>
</div>

CSS:

#close{
    float:right;
    display:block;
    margin-right:0px;
    clear:left;
}
4

3 に答える 3

5

H1はブロック要素であるため、それが立っている線のすべての幅を取ります。floatこれは、 -propertyが適用されている場合でも、H1要素に続く要素を同じ行に配置できないことを意味します。

追加することができます

position: absolute;
top: 0;
right: 0;

#close要素に。または、この要素に負のマージンを追加します。それとは別にfloat: left;、H1要素にを追加することも可能です。これにより、フローティングや改行で特定の問題が発生する可能性があることに注意してください。

H1の前#closeに-elementを追加することも可能です。これにより、H1がその行のすべてのスペースを占めるのを防ぎますが、そのスペースで近接要素を認識します。

于 2012-05-22T21:56:51.663 に答える
5

ファイルにエラーがありQandATableStyle2.cssます。後に削除;：

.previouslink{
display:none;   
};

そして、それはうまくいくはずです。;文字は#close定義がロードされないようにします。

于 2012-05-22T21:57:08.170 に答える
0

要素に適用できます。これにより、display: inline;（インラインでも）同じ行にレンダリングできます。<h1><button>

clear: both;次のコンテンツがヘッダーとボタンの間のスペースに流れ込みたくない場合は、次の要素のスタイルを設定する必要があることに注意してください。

この例を参照してください。

于 2012-05-22T22:01:43.097 に答える