2

私は店のCSSを書いています。購入ボタンを左に設定する div と、右に前の画像と次の画像を表示する必要があります。これは機能しています。

私の本当の問題は、PHP が原因で「購入」ボタンが表示されないことがあることです。

購入ボタンが存在しない場合は、画像を中央に配置する必要があります。中央に配置されていない場合、左側 (購入ボタンがあった場所) に空のスペースが表示されるためです。

最初は on と思いますがmargin:0px auto、これには一定の幅のセットが必要ですよね?

最初はこれはとても簡単だと思いました。でも行き詰まった/

フィドル

アイデアを得るための単純化

私は、私が知ることができない基本的な何かを見逃しているだけだと思います。

HTML:

<div id="comprarbtn">
    <div id="wrappcomprarbtn">
        <input class="comprarbtn commonButton" type="button" value="Buy Now" id="buynowlogin">
        <div id="naviminicc"> <a href="javascript:void(0);" class="prevImg"><img src="images/navmini_01.png" class="navmini1"></a>

            <img src="images/navmini_02.png" class="navmini2" rel="#mies1"> <a href="javascript:void(0);" class="nextImg"> <img src="images/navmini_03.png" class="navmini3"></a>

        </div>
    </div>
</div>

CSS:

.comprarbtn { width:175px; 
  line-height:51px;  
  background-image:url(image.jpg); 
  border:0px; 
  font-size:12px; 
  padding-left:10px; 
  cursor:pointer; 
  overflow:hidden; 
  text-indent:0px; 
  z-index:10; 
}

#comprarbtn { 
  float:left; 
  position:absolute; 
  width:321px; 
  text-align:center;
  height:51px;  
  z-index:1000;  
  display:table-cell; 
  background-color:#f4f4f4;
}

#wrappcomprarbtn { margin:0px auto;}

#naviminicc { width:145px; float:right;}
#naviminicc a { margin:0px; padding:0px; }
.navmini1 {  cursor:pointer; margin:0px; }
.navmini2 {cursor:pointer; margin:0px; }
.navmini3 {cursor:pointer; margin:0px; }


#navmini { width:135px; max-width:135px;}
4

1 に答える 1

1

あなたが投稿したCSSとHTMLで何が起こっているのかわかりませんが、理論的にやりたいことを達成するには:

  • ラッピング div に、ボタンと画像の両方を含めるのに十分な大きさの固定幅を指定します
  • margin: 0 auto中央に寄せてtext-align: center.
  • 中身を作るdisplay: inline

css :

.wrapper {
    width: 200px; /* Large enough to contain everything */
    text-align: center;
    margin: 0 auto;
}

.wrapper .buttons {
    display: inline;
}
于 2013-08-05T01:45:11.273 に答える