0

私がデザインしている Web サイトで、レスポンシブ デザインに関していくつかのバグが発生しています。

たとえば、画面の幅が 90% のボックスを作成し、メイン ボックス内に他の 3 つのボックスを追加します。たとえば、次のようにします。

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

そしてCSS：

ul {
 width: 90%;
 border: green;
}

li {
 margin-left: 11%;
 margin-right: 11%;
}

しかし、ブラウザのサイズを変更すると、3 番目の「li」が下がり、3 つすべてが中央に表示されません。これを行うにはどうすればよいですか? Twitter Bootstrap を使用しています。

4

1 に答える 1

0

これはすべて、(display: inline-block を使用しているときに) コードに改行またはスペースを追加すると、要素間にスペースが追加されるためだとは思わないでしょう。

それ以外の

<li>one</li>
<li>two</li>
<li>three</li>

試す

<li>one</li><li>two</li><li>three</li>

あなたは次のようなもので終わるべきです：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Margin</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style type="text/css">
body, ul {margin: 0;  padding: 0;  width: 100%}
ul {background: green; list-style-type: none}
li {display: inline-block; width: 11%; margin:0 11%; background: red}
</style>
</head>
<body>
<ul>
<li>one</li><li>two</li><li>three</li> <!-- No break lines nor spaces -->
</ul>
</body>
</html>
于 2013-09-24T23:59:17.627 に答える