floatしたulをセンタリングする為、以下のソースを記述しました。
<section>
<ul>
<li>ボタン1</li>
<li>ボタン2</li>
</ul>
</section>
section {
position: relative;
overflow: hidden;
}
section ul{
float:left;
left:50%;
position:relative;
}
section ul li{
float:left;
left:-50%;
position:relative;
width:150px;
margin-right: 5px;
}
ひとまずはそれで上手くいったのですが、スマホサイトなので横幅を可変にしたいと思い
section ul li{
float:left;
left:-50%;
position:relative;
width:40%;
margin-right: 5px;
}
に書き換えた所、リストの横幅がすごく狭くなってしまいました。
%幅で横に2つ並んだリストボタンをセンタリングさせられれば、
potisionを使用したセンタリングにこだわっているわけではありませんが
自分で思いつく限りを試しても解決に至らず、質問させていただきました。
html5、css3で記述しています。
詳しい方がいらっしゃいましたら、よろしくお願い致します。
No.1ベストアンサー
- 回答日時:
sectionの用途が少し違うような・・
→4.4.2 The section element ( http://www.w3.org/TR/2011/WD-html5-20110525/sect … )
--The section element is not a generic container element. --
デザインのためだけに必要ならdivを使うべきです。基本的に{見出しヘッダー}をもつひとつの文節を示します。
この場合は、ナビゲーションならnav、そうでなければdivではないかと・・
また、CSS3とのことですが、そこまで行かなくてもCSS2.1でよいはずです。floatはCSS2以前でdisplayにinline-blockがないときにやむなく使われていた方法です。
HTML5でもっとも重視されるのは文書構造のマークアップです。それにしたがってマークアップすると
<header>
<h1 id="title">Your title</h1>
<nav>
<ul>
<li><a href="./some">Some</a></li>
<li><a href="./nav">navigation</a></li>
<li><a href="./link">links</a></li>
</ul>
</nav>
</header>
nav{line-height:1.6em;width:100%;text-align:center;}
nav ul,nav ul li{list-style:none;margin:0;padding:0;}
nav ul{display:block;}
nav ul li{display:inline-block;width:20%;border:outset 2px gray;}
nav ul li a{display:block;width:100%;height:100%;text-decoration:none;}
nav{line-height:1.6em;width:100%;text-align:center;}
nav ul,nav ul li{list-style:none;margin:0;padding:0;}
nav ul{display:block;}
nav ul li{display:inline-table;}
★なお、floatは、あくまで文中の挿絵などの周囲にテキストを回りこませるためのもので、ブロックの配置に使用するのは目的外使用です。
お礼が遅くなり、大変申し訳ありません。
inline-blockは昔にあまりに使わないほうがいいと覚えたため考えていませんでしたが、
書いて頂いたコードを参考に色々試した所、なんとか思う通りに表示させることができました。
回答をありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストマーカーをボックス内に...
-
html/cssの、navを2段にする...
-
htmlの<ol>タグで、数字などを...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
<ul><li></li></ul>にするメリ...
-
<ul>~</ul>が二つ続くと間に改...
-
CSSでの<ul><li>を使った改行設定
-
リストの数字のフォントサイズ...
-
ローカルナビゲーションのマー...
-
float:leftで<li>要素を横並び...
-
html css マークアップについて
-
<table>の高さ固定。情報増加時...
-
ドロップダウンメニューが隠れ...
-
HTML5のfooterに見出しを付けて...
-
URLにアクセスした際に指定した...
-
divタグ内のコンテンツが重なっ...
-
テーブル内のプルダウンの下に...
-
文法チェックの<A>と</A>の間が...
-
円形の配置にするコーディング...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
<ul><li></li></ul>にするメリ...
-
ulタグやliタグの中でbrタグ...
-
レスポンシブWebデザインでリン...
-
<ul>~</ul>が二つ続くと間に改...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTMLで組織図を作成する方法
-
複数行にまたがる括弧を表示し...
-
liタグの中に<p>タグやら<dl>を...
-
display:table;を多段表示させたい
-
divタグ内のコンテンツが重なっ...
-
<table>の高さ固定。情報増加時...
-
html <ul></ul>の並びで一行空...
-
テーブル内のプルダウンの下に...
-
【至急】ul li 行間調整ができ...
おすすめ情報