だから私はいくつかの派手なラジオボタンを作ろうとしています、そして私はいくつかの奇妙な効果を得ています。サイズはすべて均一にしたいのですが、スパンが1本か2本かによってサイズが異なります。シングルライナーのボタン名の最後に追加することで修正するために「ハック」することができ<br>
ますが、それは特にエレガントではないようです。
この時点で問題はCSSにあるため、JSを削除したことに注意してください。
だから私はいくつかの派手なラジオボタンを作ろうとしています、そして私はいくつかの奇妙な効果を得ています。サイズはすべて均一にしたいのですが、スパンが1本か2本かによってサイズが異なります。シングルライナーのボタン名の最後に追加することで修正するために「ハック」することができ<br>
ますが、それは特にエレガントではないようです。
この時点で問題はCSSにあるため、JSを削除したことに注意してください。
私は捨ててdisplay: inline-block
選ぶでしょうfloat:left
ボタンを希望の場所に配置するには、他の値を少し調整する必要がある場合があります。
画像は、テキストの最後の行のベースラインに揃えられます。.genreName
追加を与えることはそれvertical-align:top
を取り除くようです。
「vertical-align」cssプロパティをよく理解してください。このような場合に非常に便利です。http://www.w3schools.com/cssref/pr_pos_vertical-align.asp-また、「line-height」は、インラインブロック要素の高さにとって非常に重要です。これを適切に調整していることを確認してください。
「vertical-align:middle;」を追加します。#Action_ Adventure、 #Audiobooks、#Biography _M emoir、#Chick-Lit要素に。また、必ず'.genreName'クラスから高さを削除してください。これにより、物事が少し良くなります。また、ラジオボタンを独自のdivにラップして、正しくフロートさせることをお勧めします。
コードの問題は、スパンとラジオボタンの両方がブロックとしてレンダリングされることです。左側のスパンがより多くのスペースを占める場合は、ラジオボタンが押し下げられます。レンダリング方法はブラウザによって異なります。
同じ高さで並べて配置したいようです。そのためには、float:leftとfloat:rightを使用する必要があります。