クロームだけでリストの横並びの2番目に隙間がでます。

締切済

質問者：auiia-ss
質問日時：2017/02/18 03:54
回答数：1件

初めて質問させていただきます。
Googleクロームだけでリストタグの2番目に隙間がでます。
タブレット、アンドロイドのクロームも同様にでてしまいます。
キャッシュも何度しました。
他のcssなどが干渉しているのかと思い少しずつタグを消しながら最終的に下記まで行きましたが、隙間は消えませんでした。

◆HTML
<!doctype html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

◆CSS
@charset "UTF-8";
ul li{
background: #000000;
position: relative;
float : left;
height: 200px;
width: 50%; //なぜかwidth:46%; の時は隙間がでません。
list-style: none;
}

他にインポートしているものなど一切ありません。
また、IE、safari、Firefox、iosでは問題ありません。

なぜかwidth: 46%の時は隙間は出ません。
3年ほどWEB業界で働いているので少しは知識があると思っていましたが原因がわかりません。
誰か助けてください。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： ORUKA1951
回答日時：2017/02/19 17:50

私はchromeはあまり考えないですが、リストを50%幅で並べるということは、２列ということなのかな？？

私は、floatはこのような場合には使用しません。本来のfloatの用途と異なるために、色々厄介なので・・
widthは、直近のstrictでないコンテナボックスのサイズに従います。
floatはともかく、隙間を開けたくないときはfont-size:0にしておく。HTMLの仕様で空白文字はまとめて１文字として処理される。

★タブは＿に置換してある。

<!doctype html>
<html>
<head>
＿<meta charset="utf-8">
＿<title>サンプル</title>
＿<meta name="description" content="">
＿<meta name="author" content="ORUKA">
<style media="screen">

</style>
</head>
<body>
＿<header>
＿＿<h1 id="title">Your title</h1>
＿＿<nav>
＿＿＿<ul>
＿＿＿＿<li><a href="#A">Some</a></li>
＿＿＿＿<li><a href="#B">navigation</a></li>
＿＿＿＿<li><a href="#C">links</a></li>
＿＿＿＿<li><a href="#D">links2</a></li>
＿＿＿</ul>
＿＿</nav>
＿</header>
＿<section>
＿＿<h2>A smaller heading</h2>
＿＿<p>
＿＿</p>
＿＿<aside>
＿＿＿<h3>Something aside</h3>
＿＿</aside>
＿</section>
＿<footer>
＿＿<h3>A nice footer</h3>
＿</footer>
</body>
</html>