複数商品登録ページのお気に入りボタン配列について

Question

お世話になります。
複数商品登録（カテゴリーページの買い物ボタン付き）ページの
お気に入り登録ボタンとお気に入りショップ登録ボタンが、どうしても
横ならびになりません。
ご指導いただけないでしょうか。

ちなみに、スタイルシートの 二つのボタンを横並びにする のwidthは
420px~435pxまで試行しましたが、ダメでした。



 /* お気に入り商品登録画像変更 */
body #rakutenLimitedId_aroundCart div.bkm{
 width: 210px !important;
 }
 body div.bookmarkArea div.bkm a.addBkm span.bkmStar {
 width: 210px !important;
 height: 169px !important;
 background: url(http://image.rakuten.co.jp/saigaitaisakuhonpo/cabinet/imgrc0071857317.gif) no-repeat 0 0 !important;
 }
 body div.bookmarkArea div.bkm a.addBkm {
 width: 210px !important;
 height: 169px !important;
 }

/* お気に入りショップ登録画像変更 */
body #rakutenLimitedId_aroundCart div.shopBkm{
 width: 210px !important;
 padding-left: 0px !important;
 }
 body div.shopBookmarkArea div.shopBkm a.addShopBkm span.shopBkmStar {
 width: 210px !important;
 height: 169px !important;
 background: url(http://image.rakuten.co.jp/saigaitaisakuhonpo/cabinet/imgrc0071857318.gif) no-repeat 0 0 !important;
 }
 body div.shopBookmarkArea div.shopBkm a.addShopBkm {
 width: 210px !important;
 height: 169px !important;
 }

/* ２つのボタンを横並びにする */
body #rakutenLimitedId_aroundCart #serviceTableSml td.favorite { width: 430px !important; }
 body #rakutenLimitedId_aroundCart #serviceTableSml td.favorite > div { display: inline-block; }

Accepted Answer

ECマスターズの田中です。

それでは、各バナーを囲むタグに、
「vertical-align: top;」の指定を加えていただいてはいかがでしょうか。
先述のソースを修正いたしましたので、ご確認ください。

Answer

ECマスターズの田中です。

通常の商品ページと複数商品登録ページでは、
HTMLの構造が異なっているため、
/* ２つのボタンを横並びにする */ 部分のスタイルシートが
適用されておりません。

下記のスタイルシートをお試しいただけますでしょうか。


/* ２つのボタンを横並びにする（複数商品登録ページ用） */
div#rakutenLimitedId_aroundCart table[width="256"] { width: 430px; }
div.bookmarkArea, div.shopBookmarkArea { display: inline-block;vertical-align: top; }

Answer

田中様

ご連絡ありがとうございます。
横並びにはなりました。が、左右段差ができます。

どうしたものでしょうか。

Answer

田中様

素晴らしいです。
キチンと横並びにできました。
感謝いたします。