试图在拍卖服务页面创建简单的菜单，有一些问题

Question

我正在尝试为拍卖服务页面创建一个简单的布局，您只能在html中使用有限的功能。我尝试使用css在一行中设置4个按钮（图像链接），但无法实现。相反，我有一个楼梯。看下面。

现在查看我的代码：

＆＃13;

＆＃13;

#user_field #main {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  font-family: Lato;
  font-size: 16px;
}

#user_field #header1 {
  background: url(http://bjoxu.webd.pl/images2/header1.png) no-repeat center;
  height: 172px;
}

#user_field #header2 {
  background: url(http://bjoxu.webd.pl/images2/header2.png) no-repeat center;
  height: 275px;
}

#user_field #footer {
  background: url(http://bjoxu.webd.pl/images2/footer.png) no-repeat center;
  height: 108px;
}

#user_field #odsylacz {
  background: url(http://bjoxu.webd.pl/images2/pasek1.png) no-repeat center;
  height: 55px;
}

#user_field .obuwie {
  background: url(http://bjoxu.webd.pl/images2/obuwie.png) no-repeat right;
  height: 55px;
  width: 185px;
  margin: 0 0 0 240px;
  display: block;
}

#user_field .torebki {
  background: url(http://bjoxu.webd.pl/images2/torebki.png) no-repeat center;
  height: 55px;
  width: 187px;
  margin: 0 0 0 425px;
  display: block;
}

#user_field .portfele {
  background: url(http://bjoxu.webd.pl/images2/portfele.png) no-repeat center;
  height: 55px;
  width: 215px;
  margin: 0 0 0 612px;
  display: block;
}

#user_field .sale {
  background: url(http://bjoxu.webd.pl/images2/sale.png) no-repeat center;
  height: 55px;
  width: 141px;
  margin: 0 0 0 827px;
  display: block;
}

＆＃13;

<DIV id=main>
  <DIV id=header1>
  </DIV>

  <DIV id=odsylacz1>
    <a href="http://allegro.pl/listing/user/listing.php?us_id=40586278&id=1469" class="obuwie"></a>
    <a href="http://allegro.pl/listing/user/listing.php?us_id=40586278&id=1492" class="torebki"></a>
    <a href="http://allegro.pl/listing/user/listing.php?us_id=40586278&id=15561" class="portfele"></a>
    <a href="http://allegro.pl/listing/user/listing.php?us_id=40586278" class="sale"></a>
  </DIV>

  <DIV id=header2>
  </DIV>

  <center>{description}</center>

  <DIV id=footer>
  </DIV>
</DIV>

＆＃13;

＆＃13;

＆＃13;

希望有人可以帮助我。

Answer 1

您需要在CSS中使用function destroy4(&$arr){ for($i=count($arr)-1;$i>=0;$i--){ if(count($arr[$i])==4) unset($arr[$i]); } $arr = array_values($arr); //restore index } destroy4($data); 来连续获取所有按钮。

您还可以在HTML中使用<input type="image"。对于辅助功能，您需要提供替代背景图像的文本。

<强> HTML

display: inline-block

<强> CSS

<input type="image" class="inarow" src="img_submit.gif" alt="Submit"/>

Answer 2

这是因为您的链接是块级元素，在样式中指定为display：block。为了让它们在同一行中对齐，您需要向链接添加float，或者将display block更改为display：inline-block（inline）。

HTML代码的示例CSS

.sale, . obuwie, . portfele, . torebki { display: inline-block; }

或

.sale, . obuwie, . portfele, . torebki { float: left; display: block; }
#odsylacz1 { clear: both; }

我建议你清理整个代码，也许在链接中使用图像。

希望这有帮助