ナビゲーションバーのfloat解除方法と画像の表示方法

このQ&Aのポイント
  • ナビゲーションバーのfloatを解除する方法と、画像の表示方法について教えてください。
  • 質問の内容は、ナビゲーションバーのfloatを解除し、その下に画像を表示したいというものです。
  • 現在はclearfixを使用してfloatを解除していますが、代わりの方法を知りたいと思っています。また、IE6〜9とFirefox10〜11での動作も考慮しています。
回答を見る
  • ベストアンサー

ナビゲーションバーのfloatを解除できない。

以上二つのソース(HTMLと,CSS)を用意しました。 top_naviのfloatを解除して その下に、画像の表示をさせたいのですが、(添付画像、ピンクエリア) top_naviの続きに、【div class="slideshow"】の画像表示エリアが表示されてしまいます。 (添付画像 水色のエリア。) 【<!--<div class="clearboth"></div>--> を使用すれば、思い通りに表示されるのですが、 clearfixの方法で解除したいと思っております。】 また、IE6~9、firefox10~11で動作させたいと思っております。 ご教授お願いします。 ==HTMLソース=== <div id="container"> <div id="top_navi"> <ul> <li>リンク1</li> <li>リンク2</li> <li>リンク3</li> </ul> </div> <!--<div class="clearboth"></div>--> <div id="show" class="slideshow" align="center"> <img src="photos/1.jpg" alt="画像の説明" width="960" height="300" border="0"> </div> </div> ==HTMLソースここまで=== ##CSSソース## *{ padding : 0px ; margin : 0px ; } #container{ width : 960px; border: 3px solid #FF9900; margin : 5px auto; } //navi設定部分ここから #top_navi { height: 1.3em; background-color: #3399FF; } #top_navi ul { padding: 0px; margin: 0px; list-style-type: none; } #top_navi li { float: left; width: 100px; height: 1em; text-align: center; padding: 0px; margin: 0px; } #top_navi li a { color: #0000FF; display: block; } #top_navi li a:hover { color: #FFFFFF; background-color: #000080; height: 1.3em; } //navi設定部分ここまで //naviとslideshowの間をclearfixする。 .clearfix:after { content: "."; /* 新しい要素を作る */ display: block; /* ブロックレベル要素に */ clear: both; height: 0; visibility: hidden; } .clearfix { min-height: 1px; } * html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ } .clearboth{ clear: both; } ##CSSソースここまで(一部抜粋)

  • CSS
  • 回答数3
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • DrFell
  • ベストアンサー率55% (305/551)
回答No.3

ごめん。1行目間違えた。 誤:cssソース側の.clearbothを「.top_navi」にすべて変える。でOK 正:cssソース側の.clearfixを「.top_navi」にすべて変える。でOK

kureakai
質問者

お礼

情報ありがとうございます。 なんとかできました。 ソースの提示大変助かりました。 また、 align="center" ですが、参考にしていたjavascriptのソースをそのままとってきたので 気づきませんでした。 ありがとうございました。

その他の回答 (2)

  • DrFell
  • ベストアンサー率55% (305/551)
回答No.2

cssソース側の.clearbothを「.top_navi」にすべて変える。でOK あるいは <!--<div class="clearboth"></div>--> <div id="show" class="slideshow" align="center"> こんなことしないで、 <div id="show" class="slideshow clearboth" align="center"> でもOK または #show .slideshow のどちらかにclear:left;を入れてもOK いずれにせよ<div class="clearboth"></div>こんなものは必要ない。 ついでに、align="center"は非推奨。なぜcssにしないか謎。

回答No.1

clearfixというのはfloatをかけている要素の親にかけるものなので、 ulにclearfixをかければfloat解除出来ると思いますよ。

kureakai
質問者

補足

情報ありがとうございます。 早速ULに試してみましたが、 IEでは表示されるのですが Firefoxでは、レイアウトが解除されませんでした・・・。

関連するQ&A

  • clearfix の後marginが効かない

    はじめました。web制作初心者です。 ご教授お願い致します。 グローバルナビゲーションを<li>で作り、それをfloatして横並びにし、マウスオーバーするように指定しました。その後、最初はclear:bothを指定していたのですが、ネットで「clearfix」の方が良いとのことでしたので初めて使いました。 すると次の<div>以降のmargin-topが効きません!! 今のブラウザはIEです。 <div id="wrapper"> <div id="navi"> <ul> <li class="menu"><a href="" title="お品書き" class="active">お品書き</a></li> <li class="drink"><a href="" title="ドリンク">ドリンク</a></li> </ul> </div> </div> <!-- ++++++++++++++++++++ E N D navi SECTION ++++++++++++++++++++ --> <!-- ++++++++++++++++++++ BEGIN contentss SECTION ++++++++++++++++++++ --> <div id="contents" class="clearfix"> <div id="left">   <div id="kodawari"> <img src="image/top_bar_coment.jpg" alt="###" width="635" height="40" /> </div> </div> </div> </div> #wrapper { width: 900px; } #navi ul, #navi ul li{ float: left; } /* afterに対応したブラウザ向け */ #contents .clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; } /* IE6 */ * htm .clearfix { height: 1%; } /* IE7 */*:first-child+html .clearfix { height: 1%; } #contents { width: 900px; padding-top: 5px; padding-right: 13px; padding-left: 12px; } #contents #left { width: 660px; margin-top: 15px; ←これが効かない } ごめんなさい。このCSSでわかりますでしょうか? よろしくお願い申し上げます。

    • ベストアンサー
    • CSS
  • float横並びにしたブロックの中のul/liを縦並びにさせたい

    float leftで横並びさせている中でul/liを縦並びにさせたい。現在はすべて横並びしてしまう。 (html) <div class="base"> <div class="box1"> <a href="#"><img src="#" alt=""></a> </div> <div class="box2"><img src="images/spacer.gif" width="1" height="1" alt=""></div> <div class="box3"> <ul class="list-y"> <li>ああああ</li> <li>いいいい</li> <li>うううう</li> <li>ええええ</li> <li>おおおお<a href="#">かかか</a></li> </ul> </div> </div> (css) ul{ margin: 0; padding: 0; list-style-type: none; text-decoration: none; display: block; } li { margin: 0; padding: 0; display: inline; } .base { width: 618px; height: 100px; margin: 0; padding: 8px 10px 0 10px; text-align: left; line-height: 1.5em; background-image: url(../images/content_bg.gif); background-repeat: repeat-y; } .base .box1 { width: 130px; height: 97px; margin: 0; padding: 0; float: left; outline: solid 2px black; } .base .box2 { width: 2px; height: 100px; margin: 0 5px 0 10px; padding: 0; float: left; border-right: dotted 2px #ccc; } .base .box3 { margin-left: 157px; padding: 0; font-weight: bold; text-align: left; } .list-y{ clear: both; } CSSに疎いのでよろしくお願いいたします。

    • ベストアンサー
    • CSS
  • floatすると親要素より横にずれてしまいます

    #contentsにある2つのボックスが左へ20pxほどずれてしまいます。 いろいろと調べてみたのですが解決できませんでした。 長文になってしまい申し訳ありませんが、ご指導よろしくお願いします。 <<CSS>> body { font-size:10px; margin: auto; padding: 0; text-align:center; min-width: 810px; max-width: 850px; height: 100%; } #wrapper { width: 830px; height:100%; margin-left:auto; margin-right:auto; padding-top: 10px; padding: 0; background-color: #FFF; } #header { width: 830px; height: 150px; margin: 0; padding-bottom: 0; min-height: 1%; overflow: hidden; line-height: 0px; background: url(back_top.gif) #F9F9F7 center top no-repeat; } img { display:block; } #logo { float: left; width: 450px; height: 78px; padding-top: 50px; padding-bottom: 0; margin-left: 40px; background: transparent; } #logo h1 { width: 450px; height: 78px; font-size:12px; margin: 0; padding-bottom: 0; background: transparent; } #navi { float: right; width: 310px; height: 50px; padding-top: 60px; margin-right: 30px; line-height: 0px; } #contents { width: 830px; min-height: 600px; margin: 0; background: url(back_main.gif) #F9F9F7 center repeat-y; } #contents #sub { float: left; width: 180px; height: auto; text-align: center; } ul { margin: 0; padding: 0; float: left; width: 180px; list-style: none; color: #794c2c; background-color: #EDE4EB; } li { display: block; margin: 0; padding: 0; font-size: small; } li span { display: block; font-size: x-small; } li#c01 a { background: url(c01.jpg) 7px 5px no-repeat; } li#c02 a { background: url(c02.jpg) 7px 5px no-repeat; } li a { display: block; min-height: 40px; padding: 5px 7px 5px 66px; border-bottom: 1px dotted #ffffff; text-decoration: none; color: #aa8f78; background-color: #F3EEDE; } ul li a:hover { color: #794c2c; background-color: #F3FAD1; } /* Hides from IE-mac \*/ * html ul li a, * html ul li { height: 40px; line-height: 1.5; } /* End hide from IE-mac */ /* line-heightはli間の隙間をなくするために指定 */ #contents #main { float: right; margin-right: 50px; width: 500px; height: auto; background-color: transparent; } #footer { width: 830px; height: 100px; background: url(back_bottom.gif) #F9F9F7 center no-repeat; margin: 0; } <<html>> <body> <div id="wrapper"> <div id="header"> <div id="logo"><h1><a href="/"><img src="../../Documents/logo.png" width="450" height="78" border="0" alt="HOMEPAGE" /></a></h1></div> <div id="navi"><p>SAMPLE</p> <div id="srchBox">**yahoo検索窓** </div></div> <div style="clear:both;"></div> <div id="contents"><div id="sub"><ul><li>&nbsp;</li><li id="c01"><a href="c01.htm">c01<span>c01</span></a></li><li>&nbsp;</li><li id="c02"><a href="c02.htm">c02<span>c02</span></a></li</ul></div> <div id="main"><img src="../../Documents/001.jpg" width="400" height="354" border="0" /></div></div> <div id="footer"><table border="0" width="750" height="100" align="center"><tr><td width="250" height="70" align="center" valign="top">AAA</td><td width="250" height="70" align="center" valign="top">BBB</td><td width="250" height="70" align="center" valign="top">CCC</td></tr><tr><td colspan="3" width="750" height="30">&nbsp;</td></tr></table></div> </div> </div> </body>

  • IE7のfloatの回り込みがうまくきません

    お疲れ様です。いつもお世話になっております。 FF2、Opera、IE7という3つのブラウザでコーディングしたHTMLをチェックしている状態です。 下記に問題のHTMLとCSSを記述します。 <div id="common_border"> <div id="common_border_side"> <div id="common_border_top"></div> <div id="l_navi"> <ul> <li id="l_navi_1"><a href="">ナビ1</a></li> <li id="l_navi_2"><a href="">ナビ2</a></li> <li id="l_navi_3"><a href="">ナビ3</a></li> </ul> </div> <div id="explain"> <h1>説明</h1> <dl> <dt>内容1</dt> <dd>説明が入ります。</dd> </dl> <dl> <dt>内容2</dt> <dd>説明が入ります。</dd> </dl> </div> <div id="common_border_bottom"></div> </div> </div> </div> common_borderのtop,bottomは丸角の枠画像です。 sideには1pxの背景画像が入ります。 /*---------丸角の枠線を表示するCSS--------------*/ #wrapper #common_border{ width:736px; margin:10px 82px; padding:0; } #wrapper #common_border_top{ background:url(../img/common_border_top.jpg) no-repeat; height:10px; padding:0; margin:0; } #wrapper #common_border_side{ background:url(../img/common_border_back.jpg) repeat-y; margin:0; padding:0; } #wrapper #common_border_bottom{ background:url(../img/common_border_bottom.jpg) no-repeat; height:20px; padding:0; margin:0; } /*----------------左のナビゲーション------------------*/ #wrapper #l_navi{ float:left; margin:0; padding:0; width:200px; } #wrapper #l_navi ul{ list-style:none; padding:0 20px; margin:25px 0; } #wrapper #l_navi ul li{ margin:0 0 5px; } /*-------------説明部分-----------------*/ h1{ text-indent:-9999px; background:url(../img/productexplain.jpg) no-repeat; margin:20px 0 10px 180px; } p{ margin:0; padding:0; } #explain{ text-align:left; width:506px; margin:0 35px 30px 15px; padding:0; } #explain dl dt{ color:#8E2E00; } 差し障りのないようところどころ端折ってます。 出来上がりは適当ですが、下記のようになります  丸角の枠線画像(上)  ナビ1 h1の説明  ナビ2 説明1  ナビ3 説明2  丸角の枠線画像(下) ナビをfloat:leftにしていて、explainにはfloatをかけていません。 explainをfloatすると、なぜか丸角の枠線画像(下)の下にナビ、explainともに表示されてしまうためです。 なので、ナビにfloatをかけた状態で、そのナビを内包するかたちでexplainに左のmarginを210pxとり、 explainのwidthを680pxほどにすることで、OperaとFFはきれいに表示されました。 ボーダーを表示させると   丸角枠線画像(上) ┏━━━━━━━━━━━ ┃┏━━━┓ h1 ┃┃ナビ1┃ 説明 と、強制的な感じです。 ところが、IE7だとこれがうまくいかず、つまり、floatされたナビを内包できずに、widthが足りず、 丸角の枠736px-(ナビ200px+説明680px)でマイナスになり、説明がナビの下に来てしまうような状態です。 なんとか足りるようにピクセルを合わせると、IE7ではきれいに見えるが、Opera,FFで崩れてしまいます。 IE7だけのハックなどがあるようなのですが、何分まだ慣れてなくて、自力で解決するのは難しそうです。 上記のソースを見て何か助言いただくことができたら、お願いします。

    • ベストアンサー
    • HTML
  • floatを使ったレイアウトのくずれについて

    Dreamweaver8で2カラムレイアウトのサイトを制作しています。 一番上からheader、トップ画像、ナビゲーションが続き、その下に2カラムのボックスがあります。 ボックスの左をコンテンツのAボックス(main02)、ボックスの右側をメニューのBボックス(navcontainer)とします。 containerの幅は776px、Aボックスの幅510px、Bボックスの幅230pxとし(各々width,paddingの合計)containerの幅に収まるように定めています。 しかし、Dreamweaverの作成画面では、Aボックスの文字は定めた幅510pxで折り返されるにもかかわらず、ボックス自体ははそれより100px以上も多い625pxまで広がり、Bボックスとの合計が766pxに収まりきれないのでメニューのBボックスは上、コンテンツのAボックスが下にずれてしまいます。 それでもプレビューすると、IE7、safari、firefox では正常に表示され、IE6だけが制作画面のとおりずれて表示されます。 どうしてこのようになるのでしょうか。 間違いを訂正いただけるとありがたいです。 /* CSS */ body { margin: 0; background-image:url(bg.gif); background-position:top; background-repeat:repeat-x; } #container { width:776px; margin:0px auto 0px auto; background-image:url(main.gif); background-repeat:repeat-y; } #header { width:776px; height:65px; margin :0px auto 0px auto; } #main02 { width:410px; float:left; font-size:13px; color:#333; text-align:left; line-height: 1.5em; padding: 20px 50px 20px 50px; } #navcontainer{ width: 200px; margin-bottom:15px; float:right; padding: 30px 30px 0 0; } #navcontainer ul{ list-style: none; margin: 0; padding: 0; border: none; line-height:120%; font-size:12px; font-weight:bold; } #navcontainer li{ margin-bottom: 5px; border-bottom:1px dashed #666; background:url(menu_list.gif) left center; background-repeat:no-repeat; padding-left:15px; } #navcontainer li a{ display: block; padding: 5px 5px 5px 7px; text-decoration: none; width: 100%; } .clear { clear: both; } -------------- /* html */ <html> <body> <div id="container"> <div id="header"><img src="○○" </div> <div id="top2_m"><img src="○○" /></div> <div id="navi"><a href=○○></div> <div id="navcontainer"> <ul id="navlist"> <li>○○</li> <li>○○</li> <li>○○</li> </ul> </div> <div id="main02">○○</div> <div class="clear"></div> <div id="main">○○</div>/*ここから1カラム*/ <div id="footer">○○</div> </div> </body> </html>

    • ベストアンサー
    • CSS
  • 【CSS】li要素をfloatした際のブラウザ表示

    はじめまして。 現在CSSでwebサイトを作成しています。 ナビゲーションにli要素を使用し、CSSで横並びになるようfloatさせているのですが、firefox・Safariでの表示がずれてしまいます。 思いつく限り検索して、幅の調整やposition関連、DTD変更なども試してみたのですが全く原因がわからず、お手上げ状態です。 DTD変更はこちらのサイト(http://2xup.org/log/2007/07/27-2111)を参考に、HTML 4.01 Transitional→XHTML 1.0 Transitionalを試してみました。 お手数おかけしますが、どなたかご教授お願いします。 ■参考 【HTML】 <div id="wrapper"> <div id="header" class="clearfix"> <h1>タイトル</h1> <ul id="menu"> <li>TOP</li> <li><a href="#">NEWS</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">BBS</a></li> <li><a href="#">LINK</a></li> </ul> </div> </div> 【CSS】 #wrapper { margin:0 auto; padding:0; width:750px; } #header { background:url(image/bgtop01.gif) no-repeat; height:125px; } #header h1,li { float:left; text-align:center; } #header h1 { width:200px; margin:50px 25px 0 50px; background:#fc0; } #menu { width:425px; } ul#menu li { width:85px; margin-top:50px; background:#ffc; } .clearfix { min-height:1% } .clearfix:after { clear:both; display:block; visibility:hidden; height:0px; content: "."; } * HTML .clearfix { height:1% } 【サンプルサイト】 http://www.memorialhall.net/ky/index_sample.php どうぞよろしくお願いします。

    • ベストアンサー
    • CSS
  • CSSレイアウト positionについて

    下記のタグにてpositionタグを使って指定した場合 IEの文字サイズを変更しるとcopyrightと言うboxが ずれてしまいます。ずれない方法はありませんでしょうか? お分かりの方のご回答をお待ちしております。 なお簡単なタグを記載してくれると幸いです。 body {    margin-left:3em; margin-left:3em; } .mainspace { width:480px; position:absolute; left:260px; padding-top:10px; padding-bottom:10px; } .leftmenu { width:200px; height:280px; position:absolute; left:50px; padding:5px; } .rightmenu { width:200px; height:280px; position:absolute; left:750px; padding:5px; } .copyright { text-align:center; position:absolute; left:50px; top:480px;       width:900px padding-bottom:10px; padding-top:10px; } HTML <h1>タイトル</h1> <div class="mainspace"> <h2>タイトル</h2> <br> <h2>タイトル</h2> <br> </div> <div class="leftmenu"> <h3>メニュー</h3> <ul> <li><a href="">テスト</a></li> <li><a href="">テスト</a></li> </ul> <h3>メニュー</h3> <ul> <li><a href=""></a>テスト</li> <li><a href=""></a>テスト</li> </ul> <h3>メニュー</h3> <ul> <li>テスト</li> <li>テスト</li> </ul> </div> <div class="rightmenu"> <h3>サブタイトル</h3> <br> </div> <div class="copyright"> test </div>

    • ベストアンサー
    • HTML
  • トップページの横幅を画面いっぱいに表示させたい。

    トップページの横幅を画面いっぱいに表示させたいのですが、イメージ画像を張り付けた上部は画面いっぱいに表示しますが、下のナビ部分のバックカラーが右に広く白場が出来てしまいます。flotを使っているためなのか…。 色々試してみたのですがどうしてもできません。 よろしくお願いします。 <body> <div class="back_color"> <div class="wrapper"> <p> <img src="images/xxx.jpg" width="1200" height="510" ></p> </div><!-- / .wrapper --> </div><!-- / .back_color --> <div class="back_color2"> <div id="nav"> <ul> <li id="top"><a href="index.html"><span>top</span></a></li> <li id="profile"><a href="profile.html"><span>profile</span></a></li> <li id="audition"><a href="audition2.html"><span>audition</span></a></li> <li id="news"><a href="news.html"><span>news</span></a></li> <li id="contact"><a href="mail.html"><span>mail</span></a></li> <li id="link"><a href="link.html"><span>link</span></a></li> </ul> </div><!-- / #nav --> <p style="color:#FFFFFF; font-size:12px; text-align:center; margin-top:60px; ">00000000000000</p> </div><!-- / .back_color2 --> </body> .wrapper { padding: 0px; height: auto; width: 1200px; margin-left:auto; margin-right:auto; } .back_color { background-color: #231a5f; width: 100%; height: 510px; } .back_color2 { background-color: #000000; width: 100%; height:150px; padding-top: 35px; padding-bottom: 35px; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF; margin-left:auto; margin-right:auto; } #nav { width:730px; height:30px; background-color: #000000; margin-left:auto; margin-right:auto; } #nav ul { line-height: 0; } #nav ul li { float: left; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } #nav ul li a { display: block; text-decoration: none; width:90px; height:30px; margin-left:15px; margin-right:15px; } #nav ul li a span { position: absolute; width: 0; height: 0; overflow: hidden; }

    • 締切済み
    • CSS
  • html,cssプルダウンメニューについて教えてください。

    html,cssプルダウンメニューについて教えてください。 現在html,cssのみでプルダウンメニューを作成しているのです、解決のできない問題点が あり困っています。どなたか知識のある方、教えていただけると嬉しいです。 [問題点] オンマウスでプルダウンメニュー表示時、その表示分だけ、親要素の<div>の 高さが広がってしまい、それに伴いそれ以下のページ内要素全て下にずれてきます。 (分かりにく表現で申し訳ありません) 出来れば、プルダウンメニューが表示されても、親要素の高さは変わらず、以下のタグ要素の 上に重なって表示させたいと思っています。 対処法がお分かりになる方、教えて頂けると幸いです。 [html] <div id="main_menu"> <div id="navi"> <ul> <li class="navi_menu" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu04.gif"></a> <ul class="sub"> <li><a href="#">サブメニュー 1</a></li> <li><a href="#">サブメニュー 2</a></li> </ul> </li> <li class="navi_menu1" onmouseover="this.className='navi_menu_on'" onmouseout="this.className='navi_menu'"> <a href="#"><IMG src="img/main_menu05.gif"></a> <ul class="sub"> <li class="navi_menu1"><a href="#">サブメニュー 1</a></li> <li class="navi_menu1"><a href="#">サブメニュー 2</a></li> </ul> </li> </ul> </div> </div> [css] #navi { width:993; margin:0 auto; border:0px solid red; padding:0px 39px 0px 0px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { float: left; margin: 0; width:120px; } #navi li.navi_menu1{ float: left; margin: 0; width:140px; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 0px 0; text-align: center; font-weight: bold; text-decoration: none; background-color: #3399ff; } #navi li a:hover { color: #ffffff; background-color: #3366cc; } #navi ul.sub { background: #eeeeee; } #navi ul.sub li { padding:5px 0px 0px 0px; float: none; height:25; } #navi ul.sub li.navi_menu1 { float: none; height:25; width:180; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding:0px 0; border-top:0px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border:0px solid #000099; } #navi li.navi_menu_on{ border:0px solid #000099;}

  • Dreamweaverでリストを作成するとボックスからずれてしまいます

    DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。

専門家に質問してみよう