luxbarの表示について2

前へ 次へ
このQ&Aのポイント
  • .luxbar-navigationでIE11でもうまく表示されたが、ハンバーガーメニューを開いた際、階層下メニューは開いたままである。修正可能か。
  • ナビバー時の背景色は任意の色に変更できるか。
  • luxbarはbalzss/luxbarから提供されるCSSフレームワークであり、ブラウザ間の互換性に関する問題がある。
回答を見る
  • ベストアンサー

luxbarの表示について2

luxbarについて再度お聞きしたいです。 .luxbar-navigation{ justify-content: flex-start; } でIE11でもうまく表示されましたが、どのブラウザもハンバーガーメニューにした時、階層下メニューは開いたままでした。これを閉じた状態から開くように修正できないのでしょうか？また、ナビバー時の背景色は任意で好みの色に変更できないでしょうか？よろしくお願いいたします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <style> <!-- .luxbar-navigation{ justify-content: flex-start; } --> </style> </head> <body> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item active"><a href="#">Home</a></li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body>

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

  • ベストアンサー
  • Proof4
  • ベストアンサー率78% (151/192)
回答No.1

ハンバーガーメニューにしたときにドロップダウンメニューが開いたままなのは元の仕様に則った正常な動作で、IE対応による弊害ではありません。 タッチデバイスではhoverの動作がPCと異なることが考慮されているのではないでしょうか。 無理やり対応させたいのであれば下記CSSを追記してください。タッチデバイスの場合はタップで開き、ほかの場所をタップすると閉じるような動作になります。 .dropdown>ul{ 　display: none; } また、背景色や文字色は任意で好みの色に変更することが可能です。 詳細は下記CSSを参照してください。 /******* カスタムの色設定 *******/ .luxbar-menu-custom, .luxbar-menu-custom .dropdown ul { 　background-color: #212121; /* 背景色 */ 　color: #fff; /* 文字色 */ } .luxbar-menu-custom .active, .luxbar-menu-custom .luxbar-item:hover { 　background-color: #424242; /* アクティブなメニューとhover時の色 */ } .luxbar-menu-custom .luxbar-hamburger span, .luxbar-menu-custom .luxbar-hamburger span::before, .luxbar-menu-custom .luxbar-hamburger span::after { 　background-color: #fff; /* ハンバーガーメニューの色 */ } HTMLのclass属性にある"luxbar-menu-dark"を"luxbar-menu-custom"に置換すると上記CSSで指定した色にできます。 ※OKWAVEの仕様上、コードのインデントを全角スペースで表示していますのでご注意ください。

jeday8118
質問者

お礼

回答ありがとうございます。お陰様で改善できました。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • luxbarのIE表示について

    HP作成でハンバガーメニューの作成が難しく、ネットで探していたらluxbarが便利そうでした。早速作成して色々なブラウザで検証してみたのですがIEのみ表示が上手くできません非対応なのでしょうか？ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> </head> <body> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item active"><a href="#">Home</a></li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body>

  • luxbarの表示について3

    Proof4さん回答ありがとうございます。お陰様で改善できました。 申し訳ないのですがあと数点教えてください。 1.luxbarの上部にヘッダー用のlogo画像等設置用のスペースの開けたいのですが可能でしょうか？試しに<br>でスペースを開けてみたのですが不可でした。もしもスペースが確保できた場合のスマホ用の大きさになった場合、ハンバーガーメニューは右上に表示しているのでしょうか？ 2.配色を試しに#91D0CDで行ってみましたが色は変わりませんでした。 3.全てのメニューに多階層を設置したいのですが、メニュー一番初めの 　<li class="luxbar-item active"><a href="#">Home</a></li>を 　<li class="luxbar-item dropdown"><a href="#">Home</a></li> にすると問題があるのでしょうか？ 4.https://okwave.jp/qa/q9621783.htmlにFlexboxのレシポンシブCSSで困って質問しています。かなりお詳しそうなので是非教えて頂けないでしょうか？ 初心者なものですから多数質問して申し訳ないのですが宜しくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <style> <!-- .luxbar-navigation{ justify-content: flex-start; } .dropdown >ul{ display: none; } /******* カスタムの色設定 *******/ .luxbar-menu-custom, .luxbar-menu-custom .dropdown ul{ background-color: #91D0CD; /* 背景色 */ color: #fff; /* 文字色 */ } .luxbar-menu-custom .active, .luxbar-menu-custom .luxbar-item:hover{ background-color: #91D0CD; /* アクティブなメニューとhover時の色 */ } .luxbar-menu-custom .luxbar-hamburger span, .luxbar-menu-custom .luxbar-hamburger span::before, .luxbar-menu-custom .luxbar-hamburger span::after { background-color: #91D0CD; /* ハンバーガーメニューの色 */ } --> </style> </head> <body> <br> <br> <br> <br> <div class="luxbar luxbar-static"> <input type="checkbox" id="luxbar-checkbox" class="luxbar-checkbox"> <div class="luxbar-menu luxbar-menu-right luxbar-menu-dark"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a class="luxbar-brand" href="#">Brand</a> <label class="luxbar-hamburger luxbar-hamburger-doublespin" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item dropdown"><a href="#">Home</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">Users</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">HomeHome</a> <ul> <li class="luxbar-item" ><a href="#">MaxMaxMax</a></li> <li class="luxbar-item" ><a href="#">Edgar</a></li> <li class="luxbar-item" ><a href="#">JohnMax</a></li> </ul> </li> <li class="luxbar-item dropdown"><a href="#">HomeHomeHome</a> <ul> <li class="luxbar-item" ><a href="#">Max</a></li> <li class="luxbar-item" ><a href="#">EdgarMax</a></li> <li class="luxbar-item" ><a href="#">John</a></li> </ul> </li> </ul> </div> </div> </body> </html>

  • プルダウンのメニュー表示について

    JavaScriptでプルダウンメニューを表示する処理を作っているのですが、どうしても求める結果が得られずに困っています。 ○メニュー1 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― 上記の画面イメージの「メニュー1」をクリックした際に、JavaScriptで下記のようにメニューを表示させたいのです。 ○メニュー1 　●メニュー1-1　　●メニュー1-2 　●メニュー1-3　　●メニュー1-4 ―――――――――――――――――― ○メニュー2 ―――――――――――――――――― ところが、「○メニュー1」のすぐ下にborderが表示されてしまったり、●印のメニューの横幅が正確に伸びません。 こういうときはやはり、ulやdlなどを使わないで大人しくtableを使うべきでしょうか？ 何か良い方法がありましたら、ぜひともアドバイスを頂けないでしょうか？ 以下がコードの一部です。 [html] <div class="tree"> 　　<a href="javascript:" id="test_01" onclick="getID(this);">○メニュー1</a> 　　<div class="tree_sub"> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-1</li> 　　　　　　<li>●メニュー1-2</li> 　　　　</ul> 　　　　<ul> 　　　　　　<li class="left">●メニュー1-3</li> 　　　　　　<li>●メニュー1-4</li> 　　　　</ul> 　　</div> </div> <div class="tree"> 　　<a href="#">○メニュー2</a> </div> [css] div.tree { 　　border-bottom:1px solid #000000; 　　width:365px; } div.tree_sub ul li { 　　float:left; } div.tree_sub ul li.left { 　　width:50%; }

  • クリックで表示、非表示するメガメニュー

    クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか？ 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか？ よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>

  • 隣接セレクタの適用範囲について。

    http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%81%8C%E9%96%8B%E3%81%84%E3%81%9F%E3%82%8A%E9%96%89%E3%81%98%E3%81%9F%E3%82%8A%E3%81%99%E3%82%8B%E3%82%A2%E3%82%B3%E3%83%BC/ 上記のサイトを参考に、CSSで開閉式のリストを作りました。 そのサイトのHTMLの1行目～10行目は下記の様になっています。 <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> それに対応したCSSは、下記の様になっています。 input[type="checkbox"].on-off + ul{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + ul{ height: 200px; } つまり、 <input type="checkbox" id="Panel1" class="on-off" />　の後ろの　<ul>タグに働きかける構造になっています。 それを改良して、<ul>タグの部分だけでなく、幅広い範囲に働きかける構造にしたいです。 そこで、対応しているCSSの隣接セレクタ「+」の後ろの「ul」を「span」にして、HTMLも「span」タグで括りました。 input[type="checkbox"].on-off + span{ height: 0; overflow: hidden; } input[type="checkbox"].on-off:checked + span{ height: 200px; } <div class="menu"> <label for="Panel1">ボタン1</label> <input type="checkbox" id="Panel1" class="on-off" /> <span> <ul> <li><a href="">リンク1</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> <li><a href="">リンク</a></li> </ul> </span> しかし、上手く動作しません。 要するに、「ボタン１」で開閉できる範囲を「リスト1」だけでなく「リスト１」「リスト２」の両方に効かせたり、「ul」タグに囲まれた範囲だけでなく、他のタグも含めた範囲にも効かせたいです。 要点を得ない質問になりましたが、アドバイスをお願いします。

    • 締切済み
    • CSS
  • IE7でのz-index対応について

    以下のようにコーディングすると、IE7でドロップダウンリストが後ろ側に隠れるのですが、対応方法はありますか？div#gnavi ul li ul.sublist　のz-indexを9999とかにしても効果なくて。。。 <div id="gnavi"> <ul> <li><a href="#">MENU01</a></li> <li><a href="#">MENU02</a> <ul class="sublist"> <li><a href="#">MENU02-01</a></li> <li><a href="#">MENU02-02</a></li> <li><a href="#">MENU02-03</a></li> <li><a href="#">MENU02-04</a></li> <li><a href="#">MENU02-05</a></li> </ul><!-- /.sublist --> </li> <li><a href="#">MENU03</a></li> <li><a href="#">MENU04</a></li> </ul> </div><!-- /#gnavi --> <div id="adArea"> <ul> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> <li><a href="#">広告スペース</a></li> </ul> </div> CSS側では、以下のようにしています。 div#gnavi ul li { float:left; position:relative; } div#gnavi ul li ul.sublist { position:absolute; top:0px; left:0px; display:none; } div#gnavi ul li ul.sublist li { float:none; } div#adArea { clear:both; } div#adArea ul li { float:left; }

    • ベストアンサー
    • HTML
  • Liで背景画像が表示されない

    よく見かけるLiでナビゲーション項目を表示させるのを しようとしているんですが、Liの背景画像が上手く表示されません。 navigationの背景画像は表示されたのですが、liで指定した 背景画像が表示されません。 どこが悪いのでしょうか?? 初歩的な事かもしれませんが、よろしくお願いします。 #navigation { WIDTH: 900px; height:50px; background: url(./h_side.jpg); background-position: left top; text-align:left; ul { margin: 0px; padding: 0px;} li { display: block; } .menuA01 { width: 178px; height:50px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; margin-right: 0px; text-decoration: none, background : url(./menuA01.jpg); background-position: left top; float: left; <div id="navigation"> <ul> <li class="menuA01"><a href="/index.html">menuA01</a></li> <li class="menuA02"><a href="/index.html">menuA02</a></li> <li class="menuA03"><a href="/index.html">menuA03</a></li> <li class="menuA04"><a href="/index.html">menuA04</a></li> <li class="menuA05"><a href="/index.html">menuA05</a></li> </ul> </div>

  • iPhoneでのナビゲーションバーの挙動について

    Twitter Bootstrap(version2.2.2)を使いホームページの作成をしようとしています。プログレッシブデザインにしてPCとスマホで表示させたいです。 ナビゲーションバーでドロップダウンメニューを使いたいのですが、PCでは思うどうりに、ドロップダウンメニューのリンクがクリックできるのですが、iPhone(iOS6.0.2)ではクリックしようとするとドロップダウンではなく（そのメニューは消え）表示上ではその下のナビゲーションバー自体をクリックしてしまいます。どのように改善したら良いのでしょうか？ HTMLは以下のようなものです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>TEST SITE</title> <link href="./css/bootstrap.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="./css/bootstrap-responsive.css" rel="stylesheet"> </head> <body style="padding-top:20px"> <div class="container"> <div class="navbar"> <div class="navbar-inner"> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR01 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP1-1</a></li> <li><a href="http://www.example.com/">DROP1-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP1-3</a></li> <li><a href="http://www.example.com/">DROP1-4</a></li> </ul> </li> </ul> <ul class="nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> NAVIGATION-BAR02 <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="http://www.example.com/">DROP2-1</a></li> <li><a href="http://www.example.com/">DROP2-2</a></li> <li class="divider"></li> <li><a href="http://www.example.com/">DROP2-3</a></li> <li><a href="http://www.example.com/">DROP2-4</a></li> </ul> </li> </ul> </div> </div> </div> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>

    • 締切済み
    • CSS
  • IE6,IE7だとメニューが写真の裏に表示される

    こんばんは。コーディング作業をしており、ヘッダーにドロップメニュー(多階層のメニューバー)を設置し、その下に写真を置いたのですが、メニューをマウスオーバーし、2階層目のカテゴリが出てきた時に、IE6.IE7だと写真の裏に隠れてしまいます。 ※ＩＥ8、ＦＦ、Ｍａｃだと写真の前にちゃんと表示されます。 ソースを添付しますので、どこがいけないかご指摘していただけないでしょうか。 よろしくお願いいたします。 [HTMLソース] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link href="style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="jquery-1.5.2.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> jQuery(function(){ jQuery('ul#nav').superfish(); }); </script> </head> <body> <div id="container"> <div id="header" class="clearfix"> <div id="menuBottom" class="clear"> <ul id="nav" class="clearfix"> <li><a href="#"><img src="" alt="" width="88" height="29" /></a> <ul> <li><a href="#aa">menu item that is quite long</a></li> <li class="current"><a href="#ab">menu item</a> <ul> <li><a href="#">menu item</a> <ul> <li><a href="#">short</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> <li><a href="#">short</a></li> </ul> </li> </ul> </div><!--#menuBottom END--> </div> </div><!--#header END--> <br /><br /><br /><br /> <div id="contents"> <div id="slide" class="fltL"> <div id="slide_body"> <ul> <li style="margin-left:300px;"><img src="" width="622" height="461" alt="" /></li> </ul> </div><!--#slide_body END--> </div> <!--#slide END--> </div><!--#container END--> </body> </html> [上のhtmlに読み込まれているＣＳＳ（style.css）] #header { width:950px; margin:0 auto; padding-top:19px; z-index:100; } #menuBottom { float:right; z-index:0; } #container { width:100%; text-align: left; } /*** ドロップメニュのＣＳＳ ***/ ul li { margin:0; padding:0; } #nav ul { position:absolute; top:-999em; width:10em; /* left offset of submenus need to match (see below) */ } #nav ul li { width:100%; height:100%; } #nav li:hover { visibility:inherit; /* fixes IE7 'sticky bug' */ } #nav li { float:left; position:relative; } #nav li:hover ul, #nav li.sfHover ul { left:0; top:2.5em; /* match top ul list item height */ z-index:99; _z-index:0; } ul#nav li:hover li ul, ul#nav li.sfHover li ul { top:-999em; } ul#nav li li:hover ul, ul#nav li li.sfHover ul { left:10em; /* match ul width */ top:0; } ul#nav li li:hover li ul, ul#nav li li.sfHover li ul { top:-999em; } ul#nav li li li:hover ul, ul#nav li li li.sfHover ul { left:10em; /* match ul width */ top:0; } /*** DEMO SKIN ***/ #nav { float:left; } #nav ul li a { display:block; position:relative; padding:0.75em 1em; border-left:1px solid #fff; border-top: 1px solid #CFDEFF; text-decoration:none; height: 100%; z-index:15; } #nav a, #nav a:visited { /* visited pseudo selector so IE6 applies text colour*/ color:#13a; } #nav li li{ background:#AABDE6; } /*** 画像部分のＣＳＳ ***/ #slide { width:624px; position:relative; } #slide_header { position:absolute; top:0px; left:0px; width:624px; height:7px; z-index:2; background: url(slide_header.png) no-repeat; } #slide_body { background: url(slide_body.gif) repeat-y 0px 0px; width:624px; margin:auto; } #slide_body img { margin:auto; }

  • リストタグ以外でfloatしたものをセンター寄せに

    下記のようにHTMLを組みました。 「.footerNav」を「float:left」して横並びにした上でセンター寄せをしたいと思いました。 しかし何をどうやってもセンター寄せになってくれません。 ちなみに各「div class="footerInner"」の幅設定はしません。 <footer> <nav> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> </nav> </footer> 調べて見ると、<div class="footerInner">～</div>の単体であれば、 センター寄せができる手段はありました。 <div class="footerInner"> <h4>○○○</h4> <ul class="XXXXX"> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> <li><a href="#">○○○</a></li> </ul> </div> しかし自分のはリストタグではなく、divタグをフロートしたもの。 リストタグではないものを「float:left」してセンタリングは可能なのでしょうか？ 何度かこの手のことにはまって、その度にいろいろな手段を試したり検索していたのですが、 検索しても見つからず、結局出来たためしがありません。 それで今回は投稿させていただきました。 ご存知の方いらっしゃいましたらご教授いただければ幸いです。

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する