質問編集履歴
6
文の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -172,4 +172,6 @@
|
|
|
172
172
|
|
|
173
173
|
|
|
174
174
|
となります。ちなみにwidth: 100%;を無くしてもこうなります。
|
|
175
|
-
青のボーダーはHTMLコード内のbrandのaタグになります。
|
|
175
|
+
青のボーダーはHTMLコード内のbrandのaタグになります。
|
|
176
|
+
|
|
177
|
+
table-cellのおかげで自動的になる仕様なのでしょうか？
|
5
タイトル変更
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
table-layout: fixedにすると左によ
|
|
1
|
+
table-layout: fixedにするとなぜか左によってしまう
|
body
CHANGED
|
File without changes
|
4
誤字の訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -172,4 +172,4 @@
|
|
|
172
172
|
|
|
173
173
|
|
|
174
174
|
となります。ちなみにwidth: 100%;を無くしてもこうなります。
|
|
175
|
-
青のボーダーはHTMLコード
|
|
175
|
+
青のボーダーはHTMLコード内のbrandのaタグになります。
|
3
全体的に訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
※「該当のソースコード」のCSSコードから抜粋
|
|
4
4
|
```CSS
|
|
5
|
-
.input-
|
|
5
|
+
.input-wrap {
|
|
6
6
|
display: table;
|
|
7
7
|
width: 100%;
|
|
8
8
|
white-space: nowrap;
|
|
@@ -26,36 +26,37 @@
|
|
|
26
26
|
<meta charset="UTF-8">
|
|
27
27
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
28
28
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
<!-- Fontawesome CSS -->
|
|
31
31
|
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
|
|
32
|
-
|
|
32
|
+
|
|
33
33
|
<title>Document</title>
|
|
34
34
|
</head>
|
|
35
35
|
<body>
|
|
36
|
-
|
|
36
|
+
<header>
|
|
37
37
|
<!-- brand -->
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
38
|
+
<a href="">
|
|
39
|
+
<div class="brand">
|
|
40
|
+
<div class="brand-inner">
|
|
41
|
+
<i class="fab fa-500px" aria-hidden="true" focusable="false" style="display:block; fill:currentcolor; height:34px; width:34px;"></i>
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</a>
|
|
45
|
+
|
|
46
|
+
<!-- search-form -->
|
|
47
|
+
<label for="" class="input-wrap">
|
|
48
|
+
<div class="i-box">
|
|
49
|
+
<i class="fas fa-search" style="display:block; fill:currentcolor; height:18px; width:18px"></i>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<div class="input-box-a">
|
|
53
|
+
<div class="input-box-z">
|
|
54
|
+
<input type="text", aria-autocomplete="list", aria-describedly="", aria-expanded="false", autocomplete="off", autocorrect="off", spellcheck="false", name="query", placeholder="探す", role="", value>
|
|
55
|
+
</div>
|
|
56
|
+
</div>
|
|
57
|
+
</label>
|
|
58
|
+
</header>
|
|
59
|
+
|
|
59
60
|
<!-- Optional JavaScript -->
|
|
60
61
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
61
62
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
|
@@ -85,7 +86,7 @@
|
|
|
85
86
|
line-height: 1;
|
|
86
87
|
-ms-text-size-adjust: 100%;
|
|
87
88
|
-webkit-text-size-adjust: 100%;
|
|
88
|
-
/*
|
|
89
|
+
/* background-color: #000; */
|
|
89
90
|
}
|
|
90
91
|
ol, ul {
|
|
91
92
|
list-style: none;
|
|
@@ -97,6 +98,7 @@
|
|
|
97
98
|
display: table-cell;
|
|
98
99
|
text-decoration: none;
|
|
99
100
|
color: inherit;
|
|
101
|
+
border: 2px solid blue;
|
|
100
102
|
}
|
|
101
103
|
|
|
102
104
|
header {
|
|
@@ -120,7 +122,7 @@
|
|
|
120
122
|
}
|
|
121
123
|
|
|
122
124
|
/* input-wrapper */
|
|
123
|
-
.input-
|
|
125
|
+
.input-wrap {
|
|
124
126
|
display: table;
|
|
125
127
|
width: 100%;
|
|
126
128
|
white-space: nowrap;
|
|
@@ -149,4 +151,25 @@
|
|
|
149
151
|
overflow: hidden;
|
|
150
152
|
}
|
|
151
153
|
|
|
152
|
-
```
|
|
154
|
+
```
|
|
155
|
+
|
|
156
|
+
### 試したこと
|
|
157
|
+
上のコードだと
|
|
158
|
+
|
|
159
|
+
のように表示されるのですが、
|
|
160
|
+
|
|
161
|
+
※「該当のソースコード」のCSSコードから抜粋
|
|
162
|
+
```CSS
|
|
163
|
+
.input-wrap {
|
|
164
|
+
display: table;
|
|
165
|
+
width: 100%;
|
|
166
|
+
white-space: nowrap;
|
|
167
|
+
table-layout: fixed;
|
|
168
|
+
}
|
|
169
|
+
```
|
|
170
|
+
.input-wrapperのtable-layout: fiexedにすると、
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
となります。ちなみにwidth: 100%;を無くしてもこうなります。
|
|
175
|
+
青のボーダーはHTMLコードないのbrandのaタグになります。
|
2
疑問点の改訂
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -12,7 +12,12 @@
|
|
|
12
12
|
.input-wrapperのtable-layout: fiexedにすると、input-wrapperが左によります。
|
|
13
13
|
しかし、なぜそうなるのかわかりません。
|
|
14
14
|
|
|
15
|
+
table-layout:fixed;の働き自体は理解しているつもりです。
|
|
16
|
+
まだまだ初心者なので、初歩的な質問なのかもしれません。
|
|
17
|
+
ご返答お願いいたします。
|
|
18
|
+
ちなみにFontawesomeのアイコンがあるのですが、構いませんでしょうか？
|
|
15
19
|
|
|
20
|
+
|
|
16
21
|
### 該当のソースコード
|
|
17
22
|
```HTML
|
|
18
23
|
<!DOCTYPE html>
|
|
@@ -144,12 +149,4 @@
|
|
|
144
149
|
overflow: hidden;
|
|
145
150
|
}
|
|
146
151
|
|
|
147
|
-
```
|
|
152
|
+
```
|
|
148
|
-
|
|
149
|
-
### 試したこと
|
|
150
|
-
|
|
151
|
-
まだ初心者なので、初歩的な質問で申し訳ないのですが、ご返答お願いいたします。
|
|
152
|
-
|
|
153
|
-
###問題が発生した環境
|
|
154
|
-
- HTML5
|
|
155
|
-
- CSS
|
1
文字の間違い
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
### 疑問点
|
|
2
2
|
|
|
3
|
-
※「該当のソースコード」
|
|
3
|
+
※「該当のソースコード」のCSSコードから抜粋
|
|
4
4
|
```CSS
|
|
5
5
|
.input-wrapper {
|
|
6
6
|
display: table;
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
}
|
|
11
11
|
```
|
|
12
12
|
.input-wrapperのtable-layout: fiexedにすると、input-wrapperが左によります。
|
|
13
|
-
しかし、なぜそうなるのかわかりせん。
|
|
13
|
+
しかし、なぜそうなるのかわかりません。
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
### 該当のソースコード
|
|
@@ -151,6 +151,5 @@
|
|
|
151
151
|
まだ初心者なので、初歩的な質問で申し訳ないのですが、ご返答お願いいたします。
|
|
152
152
|
|
|
153
153
|
###問題が発生した環境
|
|
154
|
-
- Bootstrap
|
|
155
154
|
- HTML5
|
|
156
155
|
- CSS
|