teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

文法修正

2017/03/27 06:36

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,10 +1,29 @@
1
1
  リスト`li`を包括する`ul`に幅を指定して、`li`に`float`をかけることで、
2
2
  リストが横に並び、幅を超えた場合に折り返しがされます。
3
3
 
4
- `float`を使った場合は、必ずクリア処理を行う必要があります。(他にも色々なクリア方法があります)
4
+ `float`を使った場合は、必ずクリア処理`overflow:hidden;zoom:1;`を行う必要があります。(※clearfixなど他にも色々なクリア方法があります)
5
- クリアしない場合、包括する要素(この場合は`ul`)が高さの認識を失い、折り返し後にうまく並んでくれないのでご注意ください。
5
+ floatの指定はクリアしない場合、包括する要素(この場合は`ul`)が高さの認識を失い、折り返し後にうまく並んでくれないのでご注意ください。
6
6
 
7
+ サンプルコードを置いておきますのでご参照ください。
8
+
7
9
  ```HTML
10
+ <!DOCTYPE html>
11
+ <html lang="ja">
12
+ <head>
13
+ <meta charset="UTF-8">
14
+ <title>サンプル</title>
15
+ <style>
16
+ ul {
17
+ width:200px; /* 折り返したい幅を指定 */
18
+ overflow:hidden;zoom:1; /* floatクリア */
19
+ }
20
+ ul li {
21
+ float:left;
22
+ list-style:none;
23
+ }
24
+ </style>
25
+ </head>
26
+ <body>
8
27
  <ul>
9
28
  <li>リスト1</li>
10
29
  <li>リスト2</li>
@@ -13,14 +32,6 @@
13
32
  <li>リスト5</li>
14
33
  <li>リスト6</li>
15
34
  </ul>
16
- ```
17
-
18
- ```CSS
19
- ul {
20
- width:200px; /* 折り返したい幅を指定 */
35
+ </body>
21
- overflow:hidden;zoom:1; /* floatクリア */
22
- }
23
- ul li {
24
- float:left;
36
+ </html>
25
- }
26
37
  ```

1

文法修正

2017/03/27 06:36

投稿

iss
iss

スコア506

answer CHANGED
@@ -1,6 +1,9 @@
1
1
  リスト`li`を包括する`ul`に幅を指定して、`li`に`float`をかけることで、
2
2
  リストが横に並び、幅を超えた場合に折り返しがされます。
3
3
 
4
+ `float`を使った場合は、必ずクリア処理を行う必要があります。(他にも色々なクリア方法があります)
5
+ クリアしない場合、包括する要素(この場合は`ul`)が高さの認識を失い、折り返し後にうまく並んでくれないのでご注意ください。
6
+
4
7
  ```HTML
5
8
  <ul>
6
9
  <li>リスト1</li>