0

「製品」と製品情報が中央に配置され、左にフロートしないようにCSSを調整しようとしていますが、WP投稿に追加されたショートコードを介して与えられたHTMLを調整できませんが、divでラップできますか？

HTML：

<ul class="products ribbon"> 
    <li class="product last first">
    <a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/">
        <div class="thumbnail">
    <span class="onsale">Sale!</span>   
<img width="325" height="325" src="http://dailybabydeals.co.nz/wp-content/uploads/2013/02/Front-Page-325x325.jpg" class="attachment-shop_catalog wp-post-image" alt="Front Page" />         
   <div class="thumb-shadow"></div>
     <strong class="below-thumb">Estella Rose Designs</strong> 
</div>
    <span class="price"><span class="from">From: </span><del><span class="amount">&#36;25</span></del> <ins><span class="amount">&#36;19.95</span></ins></span>     
    </a>  
    <div class="buttons">
                <a href="http://dailybabydeals.co.nz/shop/estella-rose-designs/" data-product_id="2221" class="add-to-cart add_to_cart_button product_type_variable">Select options</a></div>           
</li></ul>

CSS：

CSS

4

3 に答える 3

1

さて、あなたの質問をよりよく理解したので、これをもう一度試してみましょう。では、<ul>要素全体を中央に配置しますか？それは私が最初にあなたが望んでいたと思っていたものよりもずっと簡単です。

これを行うには、インラインブロックとして表示するように設定されているスパンタグで<ul>要素をラップするだけです。次に、テキストが中央に配置されるように包含要素を設定します。

これを試して：

<html>
  <head>
    <style language="text/css">
      /*<![CDATA[ */
      #test1 {
        text-align: center;
      }
      #test2 {
        display: inline-block;
        text-align: left;
      }
      /* ]]> */
    </style>
  </head>
  <body>
    <div id="test1">
      <span id="test2">
        <!-- Place your <ul> element here -->
      </span>
    </div>
  </body>
</html>

使い方

  • 「test2」要素は、インラインブロックとして表示するように設定されています。つまり、テキストとインラインで表示されます。これは、「text-align」など、テキストの行を操作するプロパティの影響を受ける可能性があることを意味します。
  • 「test1」要素で「text-align」を「center」に設定すると、インラインコンテンツ（この場合は「test2」要素）が画面の中央に配置されます。

ブロックを中央に配置する標準的な方法は、「margin-right」および「margin-left」プロパティを「auto」に設定することですが、これは、ブロックとして表示され、幅が100％未満の要素に対してのみ機能します。 。

于 2013-02-13T22:06:57.790 に答える
0

「Sale！」というテキストのように見える理由 左に浮かぶのは、<img>要素がデフォルトでインラインブロックとして表示されるため、画像は「Sale！」という単語と同じテキスト行に表示されます。「Sale！」というテキストの直後にある<br/>タグ。その問題を解決します。しかし、あなたはこのHTMLを変更できないと言いましたよね？

その制限を考慮して、これが問題を解決する方法です...
例のHTMLを<span>タグで囲み、クラスを割り当てます。クラス名として「test」を使用しました。次に、このCSSをHTMLドキュメントの先頭に配置します。

<style language="text/css">
  /*<![CDATA[ */
  .thumbnail img {
    display: block;
  }
  .test {
    display: inline-block;
  }
  .test .price, .test .below-thumb  {
    display: block;
    text-align: center;
  }
  /* ]]> */
</style>

なぜそれが機能するのか

  • 画像をブロックとして表示するためのセレクターは、<br/>タグが欠落している問題を解決します。
  • HTMLを囲むスパンタグは、インラインブロックとして表示されます。これは、コンテンツの周りで折りたたまれ、テキストを中央に配置できるボックスが表示されることを意味します。
  • テキストを含むアイテムをブロックとして表示すると、幅が100％になり、周囲のボックスが埋められます。
  • 「text-align：center」を含めると、最終的にテキストがコンテナ内の中央に表示されます。
于 2013-02-13T20:11:31.433 に答える
0

私はそれをdivに入れて、何も入っていない別のdivの隣にフロートさせます。

http://www.barelyfitz.com/screencast/html-training/css/positioning/

このリンクのステップ8のように。

于 2013-02-13T19:48:05.920 に答える