CSS疑似経由でクリアでいくつかの奇妙なこと: -- html フィールド と css フィールド と css-float フィールド と pseudo-element フィールド 関連 問題

Some weird thing with clear both via css pseudo :after












-2
vote

問題

日本語

このコードを調べる:

html

<事前> <コード> <h1 class="one">Sometext over here</h1> <input type="text" placeholder="E-mail" class="two">

css

<事前> <コード> .one { display: block; float: left; width: 450px; height: 60px; padding-top: 25px; color: #ffffff; font-size:34px; font-weight: 800; } .one:after { clear: both; } .two { margin: 0 auto; font-size: 150%; width: 200px; height: 20px; }

jsfiddle

上記の例では、 9988777667 要素が機能していない clear both がなぜなのですか? <div style="clear:both"></div> の中のクリアは自己作動します。

英語

Examine this code:

HTML

<h1 class="one">Sometext over here</h1> <input type="text" placeholder="E-mail" class="two"> 

CSS

.one { display: block; float: left; width: 450px; height: 60px; padding-top: 25px; color: #ffffff; font-size:34px; font-weight: 800; } .one:after { clear: both; } .two { margin: 0 auto; font-size: 150%; width: 200px; height: 20px;   } 

JSfiddle

Why is the clear both with the after element not working in this example above? while the clearing with <div style="clear:both"></div> inside the layout it self do work.

</div
           
       
       

回答リスト

0
 
vote
vote
ベストアンサー
 

<コード> :after Clear Floatのトリックは、浮遊要素の内部の内側に機能します。

h1 の内側に <div style="clear:both"></div> を置くと、floatがクリアされませんので、兄弟要素の兄弟または親要素である必要があります。 / P>

SOの場合<コード> input

のfloatをクリアするだけです。

 <コード> .one {    float: left;    width: 450px;    height: 60px;    padding-top: 25px;    color: #ccc;    font-size:34px;    font-weight: 800;  }  .two {    display: block;    margin: 0 auto;    font-size: 150%;    width: 200px;    height: 20px;    clear: both;  }  
 <コード> <h1 class="one">Sometext over here</h1>  <input type="text" placeholder="E-mail" class="two">  

 

The :after clear float trick works on floated element inside the pseudo elements parent.

If you would put the <div style="clear:both"></div> inside the h1 it will not clear the float either, so it has to be a sibling or a parent element of the floated element

So in your case just clear the float on the input

.one {    float: left;    width: 450px;    height: 60px;    padding-top: 25px;    color: #ccc;    font-size:34px;    font-weight: 800;  }  .two {    display: block;    margin: 0 auto;    font-size: 150%;    width: 200px;    height: 20px;    clear: both;  }
<h1 class="one">Sometext over here</h1>  <input type="text" placeholder="E-mail" class="two">
</div
 
 
1
 
vote

これを試して、 display: block を入力に追加:

css

<事前> <コード> .one { display: block; width: 450px; height: 60px; padding-top: 25px; color: #ffffff; font-size: 34px; font-weight: 800; text-align: left; } .two { font-size: 150%; width: 200px; height: 20px; display: block; margin:0 auto; }

html

<事前> <コード> <h1 class="one">Sometext over here</h1> <input type="text" placeholder="E-mail" class="two">

デモここ

 

Try this, add display: block to input:

CSS

.one {   display: block;   width: 450px;   height: 60px;   padding-top: 25px;   color: #ffffff;   font-size: 34px;   font-weight: 800;   text-align: left; }  .two {   font-size: 150%;   width: 200px;   height: 20px;   display: block;   margin:0 auto; } 

HTML

<h1 class="one">Sometext over here</h1> <input type="text" placeholder="E-mail" class="two"> 

DEMO HERE

</div
 
 
         
         
0
 
vote

clearfix を親要素に提供すると、これがあなたを助けることができることを願っています。 <div style="clear:both"></div>0 も含みますが、これはフロートをクリアするための最良の方法です。これがJSFIDDLEリンク https://jsfiddle.net/rhulkashyap/jjv6t6gd /

 <コード> <div style="clear:both"></div>1  
 <コード> <div style="clear:both"></div>2  
 

It would be good if you provide clearfix to parent element try this snippet hope this could help you. I'm also including :before but this is the best way to clear the floats. here is the jsfiddle link https://jsfiddle.net/rhulkashyap/jjv6t6gd/

.one {    display: block;    float: left;    width: 450px;    height: 60px;    padding-top: 25px;    color: #111;    font-size: 34px;    font-weight: 800;  }  .clearfix:before,  .clearfix:after {    content: "";    display: table;  }  .clearfix:after {    clear: both;  }  .clearfix {    *zoom: 1;  }  .two {    margin: 0 auto;    font-size: 150%;    width: 200px;    height: 20px;  }
<div class="clearfix">    <h1 class="one">Sometext over here</h1>  </div>  <input type="text" placeholder="E-mail" class="two">
</div
 
 
 
 

関連する質問

8  コンテンツの前に、CSSを最初の文字に適用する方法  ( How to apply css to the first letter after before content ) 
<事前> <コード> <!DOCTYPE html> <html lang="en"> <head> <style type="text/css"> p:before { content:"Former - "; color:red; ...

4  JavaScript:CSS疑似を変更する機会や代替案:前後に:  ( Javascript any chance or alternative to change the css pseudo before and afte ) 
今のところ、疑似要素を変更するための任意の解決策を見つけるためにほぼ全体のスタックオーバーフローフォーラムを読んでください。 私の理解のために変更することはできません。ブラウザが表示されたときはDOMにはありません。しかし、それでどこにありますか?ブラウザメモ...

0  リンクの使用後にリンクが消える:CSSのプロパティの後  ( Link disappears after use of after property in css ) 
現在、ウェブサイトの荷重時間をスピードアップしようとしています。私がこのプロジェクトを取ったとき、あなたが「カテゴリー」を超えているように画像を明るくするためのロールオーバー画像がありました。私はあなたがまったく同じ画像を2つ(2番目に明るくするだけで)を使わ...

5  背景色は1つのポジションで安定していません  ( Background color not stable in one position ) 
スリックスライダーの外観をカスタマイズしています。 私は灰色の背景を持っている灰色の背景を持っています .media-slider には、灰色の背景の上に位置合わせする矢印と私は矢印を揃える矢印: ここは灰色の背景です: <事前> <コード> .media-...

0  ホバーの太字は要素を移動します。 Firefoxでは解決策のみが機能しません  ( Bold on hover moves elements only solution doesnt work in firefox ) 
私はそれがホバリングされたときにテキストが太字になる単純なナビゲーションをしようとしました。それはそれほど難しくないので私はかなり速くなりましたが、私がそれをホバリングするたびに、エレメントはナビゲーションの他の要素を離れて離れていました。だから私は疑似要素を...

12  リンク内の下線装飾なしでCSS疑似要素をスタイルする方法は?  ( How to style a css pseudo element without an underline decoration inside a link ) 
は、擬似要素の下線テキスト装飾を示すことなく、CSSによって疑似要素を A HTMLタグに追加することが可能ですか?次のマークアップでは、リンクの左側に「+」シンボルが追加され、CSSルールが「H3 Aに設定しても疑似記号 "+"には下線が引かれています。 ...

2  アニメート方法:jQueryを使ったセレクタの前に  ( How to animate before selector with jquery ) 
私は疑似セレクタを定義する前にいくつかの要素を持っています。いくつかの移行、アニメーションを追加する必要がありますが、CSSでは不可能です。だから私はjQueryでこれを行うことができると思いますが、何かが正しく行われていません。手伝って頂けますか?これは私の...

7  JavaScriptを使用して疑似要素のオフセットリフトを取得します  ( Get offsetleft of pseudo elements using javascript ) 
JavaScriptのみを使用して疑似要素のオフセットリフトを取得する方法はありますか? Chrome DevToolsコンソールを介してElementの前に::そのオフセットリフトを調べることができます。 window.getComputedStyl...

50  「テキスト装飾」と「:後」疑似要素、再検討  ( Text decoration and the after pseudo element revisited ) 
私はその答えが 印刷メディア用のスタイルシートでは、 :after 疑似クラスを使用して、すべてのリンクの後にURLを追加したい。 <事前> <コード> a:after { content: " <" attr(href) ">"; text-...

12  :: - WebKit-Selection Selectorがサポートされていますか?  ( Has the webkit selection selector ever been supported ) 
::-webkit-selection には、インターネット上にいくつかの参照があります。 <コード> ::selection selector http://www.quirksmode.org/css/selection.html (編集: P...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有