質問編集履歴
1
ソースコードを一部修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -7,11 +7,11 @@
|
|
|
7
7
|
サジェストの幅を、親要素を超えて画面いっぱいに広げるには、どうしたらいいでしょうか？
|
|
8
8
|
|
|
9
9
|
### 該当のソースコード
|
|
10
|
-
以下を実行 → https://jsfiddle.net/
|
|
10
|
+
以下を実行 → https://jsfiddle.net/16wv4rna/
|
|
11
11
|
```HTML
|
|
12
12
|
<p><span class="color_salmon">.input</span> に入力すると<span class="color_pink">.suggest</span> が表示される機能があり、このテキストを<br>
|
|
13
|
-
➀.input の直下に表示したい<br>
|
|
13
|
+
➀<span class="color_salmon">.input</span> の直下に表示したい<br>
|
|
14
|
-
②画面の右側いっぱいまで広げたい（左側は .
|
|
14
|
+
②画面の右側いっぱいまで広げたい（左側は <span class="color_salmon">.input</span> の左と同じ位置）<br>
|
|
15
15
|
というのが目標</p>
|
|
16
16
|
|
|
17
17
|
<br><hr><br>
|
|
@@ -39,6 +39,10 @@
|
|
|
39
39
|
padding: 0;
|
|
40
40
|
list-style: none;
|
|
41
41
|
}
|
|
42
|
+
span {
|
|
43
|
+
margin: 2px;
|
|
44
|
+
display: inline-block;
|
|
45
|
+
}
|
|
42
46
|
.color_salmon {
|
|
43
47
|
background: salmon;
|
|
44
48
|
}
|
|
@@ -57,7 +61,7 @@
|
|
|
57
61
|
line-height: 1.5;
|
|
58
62
|
}
|
|
59
63
|
.suggest{
|
|
60
|
-
position:
|
|
64
|
+
position: absolute;
|
|
61
65
|
top: calc(1em * 1.5);
|
|
62
66
|
right: auto;
|
|
63
67
|
bottom: auto;
|