2

私は、次の 2 つの主要コンポーネントで構成される Wordpress のランディング ページに取り組んでいます。

  1. 垂直方向および水平方向に中央揃えされた DIV (Jquery で実現)
  2. ロールオーバー効果のある一連のボタン (JqueryUI で実現)

これらのコンポーネントはどちらも正常に機能しているように見えますが、HTML エディターでは見つけられないように見えるボタンの間に余分なスペースがあり、ここで確認できます。「メイン サイト」、「モバイル」、および「寄付」ボタンの間のスペースは、タイトルと最初のボタンの間のスペースよりも著しく大きくなっています。

</div>Chrome で inspect 要素を使用すると、各ボタンのタグに続く行にが含まれて" "います。これが余分なスペースの原因であると思われますが、Wordpress HTML エディターでは見つかりません。WP disable wpautop-type プラグインもダウンロードしましたが、スペースが削除されていません。

最後に、HTML と関連する CSS をJSfiddleに貼り付けると、余分なスペースがなくなります。問題はWordpressの自動フォーマットにあると思います。ただし、どの関数がスペースを追加しているのか、またはスペースを削除する方法がわかりません。どんな助けでも大歓迎です！

4

2 に答える 2

1

問題のボタンに負の下マージンを追加することになり、DIV間のスペースを必要なだけ削除/縮小しました。そうは言っても、負のマージンを追加するのが悪い習慣である場合は、誰かがこの投稿に飛び込んで私を止めてください!

ShaunOReilly、あなたの助けとjsfiddleに感謝します-私は間違いなくそれを心に留めておきます.

マルカ

于 2012-08-29T18:29:36.820 に答える
0

ボタンの間に余分な二重引用符がいくつかあります。

<div id="landing" style="margin-top: -100px; top: 50%; position: absolute; margin-left: -200px; left: 50%; "><div style="font-family: 'serif6_beta_rregular'; font-size: 26pt; color: #ffffff; text-align: center;">Adrienne Adams</div>
    ""
    <div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Main Site</div>
    ""
    ​&lt;div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Mobile</div>​
    ""
    <div class="sample" onclick="top.location.href='http://www.google.com'" style="background-color: rgb(35, 31, 32); color: rgb(255, 255, 255); ">Donate</div>​
</div>

改行文字か何かである可能性があります。

これは違うようです：http://jsfiddle.net/webwarrior/tHwmH/3/

同じ二重引用符を追加すると、同じ効果が得られます: http://jsfiddle.net/webwarrior/tHwmH/4/

テンプレートが何をしているのかを理解するのに何日も費やしたくない場合は、次の jQuery をDocumentReady関数に追加します。

jQuery("#landing").parent().append("<div class='temp'><div>");
jQuery(".temp").append(jQuery("#landing div"));
jQuery("#landing").empty();
jQuery("#landing").append(jQuery(".temp div"));
jQuery(".temp").remove();

ここで実際に見られるように: http://jsfiddle.net/webwarrior/tHwmH/18/

于 2012-08-28T04:52:33.920 に答える