ホームページ  >  記事  >  ウェブフロントエンド  >  CSSについての単純な質問ですが、DivとSpanを同じ行に置くとどうなりますか? _html/css_WEB-ITnose

CSSについての単純な質問ですが、DivとSpanを同じ行に置くとどうなりますか? _html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 12:20:421284ブラウズ

<table>  <tr>      <th style="width:180px;border:1px solid red">          <div>div</div>           <span>span</span>                 </th>  </tr>  </table>  


上記のコードで、SpanのCSSを調整してspanとdivを同一行に置くことができますか?

span 以外の要素の CSS プロパティは調整できないことに注意してください。ただし、span を他の要素に変換することはできます。この要素は、画像である背景の属性をサポートする必要があります。


ディスカッションへの返信(解決策)

まさか。 。 div はすでに上部を埋めており、他の要素のスタイルを変更しない限り、解決策はありません。

または、次のようにスパンの外側に div を追加します
:

    <table>      <tr>          <th style="width:180px;border:1px solid red">              <div>div</div>               <div><span>span</span></div>        </th>      </tr>      </table>

LZ には答えがありますか? 方法が思いつきません

        <table>      <tr>          <th style="width:180px;border:1px solid red">              <div>div</div>               <div style="position:relative;"><span style="position:absolute;top:-22px;left:0;">span</span></div>        </th>      </tr>      </table>


スタイルを書くのを忘れたので追加してください

Span は絶対に、左に、上に配置します~~

f5d188ed2c074f8b944552db028f98a1

06071e6bf1c17c1add285fcb192b1e6d 92eb7bc1f1cbb2434bfafea1285716eespand6d448110e0324953b5d7bc1e2b276ce
dc6dce4a544fdca2df29d5ac0ea9906bdiv16b28748ea4df4d9c2150843fecfba68
01c3ce868d2b3d9bce8da5c1b7e41e5b
fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08

達成するために使用する手段をより狭い範囲に制限するあなたのニーズは、それは興味深いものではありませんか?インライン要素とブロックレベル要素を理解していますか?まず、どれがインライン要素でどれがブロックレベル要素であるかを理解してから、それらを使用してください。そうしないと、レイアウトが大きな穴になってしまいます...

スパンは絶対位置のみで、左と上は自分で調整できます~~


絶対位置は親要素から分離されているため、良くありません。

f5d188ed2c074f8b944552db028f98a1

06071e6bf1c17c1add285fcb192b1e6d 81751c45c7f7636a4a4054be5b1b65a0 ;div>div16b28748ea4df4d9c2150843fecfba68
01c3ce868d2b3d9bce8da5c1b7e41e5b
f16b1740fad44fb09bfe928bcc527e08
これが本当のマスターです!

a34de1251f0d9fe1e645927f19a896e8
06071e6bf1c17c1add285fcb192b1e6d 6c8624910a5be7e1fae035bb8801b606span54bdf357c58b8a65c66d7c19c8e4d114 dc6dce4a544fdca2df29d5ac0ea9906bdiv16b28748ea4df4d9c2150843fecfba68
01c3ce868d2b3d9bce8da5c1b7e41e5b

f16b1740fad44fb09bfe928bcc527e08

これが本当のマスターです!

これが本当のマスターです。「wuzhengqing1」や「KK3K2005」のような独善的な人々に崇拝されるために、この投稿を 1 日保存してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。