オークションサービスページに簡単なメニューを作成しようとしましたが、いくつかの問題があります

Question

htmlの限られた機能しか使用できないオークションサービスページ用の簡単なレイアウトを作成しようとしています。私は4つのボタン（画像リンク）をCSSを使って1行に設定しようとしていますが、それを達成できません。代わりに私は階段を持っています。下を見てください。

そして今、私のコードで確認してください。

#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; 
 
}

<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>

誰かが私を助けることができると思います。

Answer 1

CSSでdisplay: inline-blockを使用すると、すべてのボタンを連続して取得する必要があります。

また、HTMLに<input type="image"を使用することもできます。また、アクセシビリティのために、背景イメージの代替テキストを提供する必要があります。

HTML

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

CSS

.inarow { 
    display: inline-block; 
} 

Answer 2

あなたのリンクはディスプレイとしてのスタイルで指定されたブロックレベル要素、あるので、それはです：ブロック。それらを同じ行に整列させるには、リンクに浮動小数点を追加するか、表示ブロックを変更してインラインブロック（インライン）を表示する必要があります。あなたのHTMLコードの

例のCSSは

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

OR

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

私もあなたがビットにコード全体をきれいに、そしておそらく、リンク内の画像を使用することをお勧めします。

ホープこれは