csslayout_html/css_WEB-ITnose

これを同じレベルにしたいです。 この CSS コードの書き方

div.shopname { height:110px; width:1090; text-align:left; margin:20px;}//这个是那三个所在的DIV框#titlephoto { height:100px;}//淘宝网图片的CSS #searchbox{ border:3px solid #FF3300; height:40px; position:relative; width:500px; margin-bottom:40px;} //input按钮的css #searchimgbtn{} //搜索按钮图片的 CSS

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

質問が理解できないので、明確に説明してください

幅を定義します3 つの div をすべて追加すると、すべて float:left; になります

ただし、div は使用せず、span{display:inline-block;} を使用することをお勧めします

垂直方向のセンタリングを微調整するには、padding-top を使用します

すべて3 つの div が幅を定義しているので、すべて float:left; で問題ありません

ただし、div は使用せず、span{display:inline-block;} を使用することをお勧めします

垂直方向のセンタリングを微調整するには、padding-top を使用します

上の階の正解です。これは位置の問題です。img はインラインタグであり、input はブロックレベルのタグであるため、これらを直接組み合わせると、Float が同じ行に配置されなくなります。テキストの流れから抜け出す。
作者がブラウザの互換性の問題を考慮する必要があるかどうかはわかりません

必要に応じて、さらにデバッグが必要です

3 つすべての div の幅を定義してから、 float:left を使用します

垂直センタリングを微調整するには、padding-top を使用します

スパン内で入力をネストできますか?

span は div と似ていますが、 div がデフォルトでブロック要素である点が異なります。