2

我正在为商店编写 CSS。我需要一个 div 将购买按钮设置在左侧，将 Prev 和 View Next 图像设置在右侧，这是有效的。

我真正的问题是有时“购买”按钮不会出现，因为 PHP。

当购买按钮不存在时，图像必须居中，因为如果不存在，左侧将是空白区域（购买按钮所在的位置）

起初我想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 回答