0

私は div タグを使用するのが初めてで、この問題を理解しようとして髪を引っ張っています。何時間も検索しましたが、適切な解決策が見つからないようです。

現在、1 つの div 要素で水平メニューを作成しています。複数の div 要素を 1 つにネストして使用することはできません。ブラウザのサイズを変更すると要素が折り返されるためです。float:left は使用できません。ブラウザのサイズを変更すると要素が折り返されるからです。

上記および他の複数のコード スニペットをテストしましたが、メニュー内のリンク間のスペースを削除できません。これが私のコードです。

<div style=" display:inline-block; width:100%; padding: 0.1em 0.6em; border-collapse:collapse; max-height:100px; margin-top:-1px; margin-left:30%; overflow-y:hidden;">

<img src="logo.png" />
<img src="cornerthing4.png" /><a href="index.php"><img src="homebtn.png"></a><a href="index.php"><img src="faqbtn.png"></a><img src="cornerthing3.png">



</div>

私は現在ページをデザインしようとしているので、スタイルタグを使用しています。終了したら、css コードを css ファイルに移動します。

タグが削除される<a href>と、画像は希望する場所に並べられます。そのタグを付けるとすぐに、間に 20 ピクセルのスペースができます。

これが発生する理由とそれを修正する方法についての洞察は素晴らしいでしょう。

編集: コードは jfiddle で動作しますが、私の Web サイトでは動作しません。サイトへのリンクは次のとおりです。 http://matxor.net/header.php

4

3 に答える 3

4

あなたのスタイルには余裕があります。この余白は、ここに貼り付けたマークアップにはありません。それはあなたが取り除こうとしているものですか？

a:link {
  margin-left: 30px;
  color: #0A58A5;
  text-decoration: none;
  font-weight: bold;
}
于 2012-08-31T21:29:21.737 に答える
2

タグからmargin-left:30pxルールを外す<a>と、あなたが望むように見えます。

于 2012-08-31T21:29:45.923 に答える
1

現在、1 つの div 要素で水平メニューを作成しています。複数の div 要素を 1 つにネストして使用することはできません。ブラウザのサイズを変更すると要素が折り返されるためです。float:left は使用できません。ブラウザのサイズを変更すると要素が折り返されるからです。

できますよ！

http://jsfiddle.net/charlescarver/fY48A/

この例では、要素はそれ自体で折り返されず、コンテナ div100%の幅はそのままです。

于 2012-08-31T21:26:04.827 に答える