質問編集履歴

6

文の追加

2019/03/23 10:41

投稿

ironman
ironman

スコア20

test CHANGED
File without changes
test CHANGED
@@ -347,3 +347,7 @@
347
347
  となります。ちなみにwidth: 100%;を無くしてもこうなります。
348
348
 
349
349
  青のボーダーはHTMLコード内のbrandのaタグになります。
350
+
351
+
352
+
353
+ table-cellのおかげで自動的になる仕様なのでしょうか?

5

タイトル変更

2019/03/23 10:41

投稿

ironman
ironman

スコア20

test CHANGED
@@ -1 +1 @@
1
- table-layout: fixedにすると左による原因
1
+ table-layout: fixedにするとなぜか左によってしまう
test CHANGED
File without changes

4

誤字の訂正

2019/03/21 23:39

投稿

ironman
ironman

スコア20

test CHANGED
File without changes
test CHANGED
@@ -346,4 +346,4 @@
346
346
 
347
347
  となります。ちなみにwidth: 100%;を無くしてもこうなります。
348
348
 
349
- 青のボーダーはHTMLコードないのbrandのaタグになります。
349
+ 青のボーダーはHTMLコードのbrandのaタグになります。

3

全体的に訂正

2019/03/21 09:18

投稿

ironman
ironman

スコア20

test CHANGED
File without changes
test CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  ```CSS
8
8
 
9
- .input-wrapper {
9
+ .input-wrap {
10
10
 
11
11
  display: table;
12
12
 
@@ -54,13 +54,13 @@
54
54
 
55
55
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
56
56
 
57
-
57
+
58
58
 
59
59
  <!-- Fontawesome CSS -->
60
60
 
61
61
  <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">
62
62
 
63
-
63
+
64
64
 
65
65
  <title>Document</title>
66
66
 
@@ -68,51 +68,53 @@
68
68
 
69
69
  <body>
70
70
 
71
- <header>
71
+ <header>
72
72
 
73
73
  <!-- brand -->
74
74
 
75
- <a href="">
76
-
77
- <div class="brand">
78
-
79
- <div class="brand-inner">
80
-
81
- <i class="fab fa-500px" aria-hidden="true" focusable="false" style="display:block; fill:currentcolor; height:34px; width:34px;"></i>
82
-
83
- </div>
84
-
85
- </div>
86
-
87
- </a>
88
-
89
-
90
-
91
- <label for="" class="input-wrapper">
92
-
93
- <div class="i-box">
94
-
95
- <i class="fas fa-search" style="display:block; fill:currentcolor; height:18px; width:18px"></i>
96
-
97
- </div>
98
-
99
-
100
-
101
- <div class="input-box-a">
102
-
103
- <div class="input-box-z">
104
-
105
- <input type="text", aria-autocomplete="list", aria-describedly="", aria-expanded="false", autocomplete="off", autocorrect="off", spellcheck="false", name="query", placeholder="探す", role="", value>
106
-
107
- </div>
108
-
109
- </div>
110
-
111
- </label>
112
-
113
- </header>
114
-
115
-
75
+ <a href="">
76
+
77
+ <div class="brand">
78
+
79
+ <div class="brand-inner">
80
+
81
+ <i class="fab fa-500px" aria-hidden="true" focusable="false" style="display:block; fill:currentcolor; height:34px; width:34px;"></i>
82
+
83
+ </div>
84
+
85
+ </div>
86
+
87
+ </a>
88
+
89
+
90
+
91
+ <!-- search-form -->
92
+
93
+ <label for="" class="input-wrap">
94
+
95
+ <div class="i-box">
96
+
97
+ <i class="fas fa-search" style="display:block; fill:currentcolor; height:18px; width:18px"></i>
98
+
99
+ </div>
100
+
101
+
102
+
103
+ <div class="input-box-a">
104
+
105
+ <div class="input-box-z">
106
+
107
+ <input type="text", aria-autocomplete="list", aria-describedly="", aria-expanded="false", autocomplete="off", autocorrect="off", spellcheck="false", name="query", placeholder="探す", role="", value>
108
+
109
+ </div>
110
+
111
+ </div>
112
+
113
+ </label>
114
+
115
+ </header>
116
+
117
+
116
118
 
117
119
  <!-- Optional JavaScript -->
118
120
 
@@ -172,7 +174,7 @@
172
174
 
173
175
  -webkit-text-size-adjust: 100%;
174
176
 
175
- /* background-color: #000; */
177
+ /* background-color: #000; */
176
178
 
177
179
  }
178
180
 
@@ -196,6 +198,8 @@
196
198
 
197
199
  color: inherit;
198
200
 
201
+ border: 2px solid blue;
202
+
199
203
  }
200
204
 
201
205
 
@@ -242,7 +246,7 @@
242
246
 
243
247
  /* input-wrapper */
244
248
 
245
- .input-wrapper {
249
+ .input-wrap {
246
250
 
247
251
  display: table;
248
252
 
@@ -301,3 +305,45 @@
301
305
 
302
306
 
303
307
  ```
308
+
309
+
310
+
311
+ ### 試したこと
312
+
313
+ 上のコードだと
314
+
315
+ ![イメージ説明](87a0e2d67ec5f700349921a06a3ff1f4.png)
316
+
317
+ のように表示されるのですが、
318
+
319
+
320
+
321
+ ※「該当のソースコード」のCSSコードから抜粋
322
+
323
+ ```CSS
324
+
325
+ .input-wrap {
326
+
327
+ display: table;
328
+
329
+ width: 100%;
330
+
331
+ white-space: nowrap;
332
+
333
+ table-layout: fixed;
334
+
335
+ }
336
+
337
+ ```
338
+
339
+ .input-wrapperのtable-layout: fiexedにすると、
340
+
341
+
342
+
343
+ ![イメージ説明](ad099f1f6c513ceea9327b2ede6cbc73.png)
344
+
345
+
346
+
347
+ となります。ちなみにwidth: 100%;を無くしてもこうなります。
348
+
349
+ 青のボーダーはHTMLコードないのbrandのaタグになります。

2

疑問点の改訂

2019/03/21 09:17

投稿

ironman
ironman

スコア20

test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,16 @@
26
26
 
27
27
 
28
28
 
29
+ table-layout:fixed;の働き自体は理解しているつもりです。
30
+
31
+ まだまだ初心者なので、初歩的な質問なのかもしれません。
32
+
33
+ ご返答お願いいたします。
34
+
35
+ ちなみにFontawesomeのアイコンがあるのですが、構いませんでしょうか?
36
+
37
+
38
+
29
39
 
30
40
 
31
41
  ### 該当のソースコード
@@ -291,19 +301,3 @@
291
301
 
292
302
 
293
303
  ```
294
-
295
-
296
-
297
- ### 試したこと
298
-
299
-
300
-
301
- まだ初心者なので、初歩的な質問で申し訳ないのですが、ご返答お願いいたします。
302
-
303
-
304
-
305
- ###問題が発生した環境
306
-
307
- - HTML5
308
-
309
- - CSS

1

文字の間違い

2019/03/21 08:36

投稿

ironman
ironman

スコア20

test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- ※「該当のソースコード」からのCSSコードから抜粋
5
+ ※「該当のソースコード」のCSSコードから抜粋
6
6
 
7
7
  ```CSS
8
8
 
@@ -22,7 +22,7 @@
22
22
 
23
23
  .input-wrapperのtable-layout: fiexedにすると、input-wrapperが左によります。
24
24
 
25
- しかし、なぜそうなるのかわかりせん。
25
+ しかし、なぜそうなるのかわかりせん。
26
26
 
27
27
 
28
28
 
@@ -304,8 +304,6 @@
304
304
 
305
305
  ###問題が発生した環境
306
306
 
307
- - Bootstrap
308
-
309
307
  - HTML5
310
308
 
311
309
  - CSS