質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

1回答

1498閲覧

selectboxの下に隙間ができてしまう

rikutennis

総合スコア55

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/05/22 06:28

編集2020/05/22 06:54

イメージ説明

イメージ説明

このようにselectboxの下に隙間ができてしまいます.
考えられる原因や対策など,ありますでしょうか.

環境はGooglechromeです.

HTML

1<tr> 2 <td> 3 <span class="input_title">グループ名</span> 4 <div class="input_note_wrapper"> 5 <select class="filter_select2" id="group_sel" name="group_id" style="font-size:medium;"> 6 <option value="0" selected >未選択</option> 7 @if(isset($data['project_info']->group)) 8 @foreach($data['group'] as $key => $value) 9 <option value="{{{$value->group_id}}}" @if(old('group_id')==$value->group_id || $data['project_info']->group_id == $value->group_id)) selected @endif>{{$value->name}}</option> 10 @endforeach 11 @else 12 <option value selected disabled>選択</option> 13 @foreach($data['group'] as $key => $value) 14 <option value="{{{$value->group_id}}}" @if(old('group_id')==$value->group_id) selected @endif>{{$value->name}}</option> 15 @endforeach 16 @endif 17 </select> 18 <a data-id='' class="button_add" href="#popup-client-group-add" rel="modal:open"> 19 <img src="{{ asset("home/images/add_blue.png") }}" class="add_btn"> 20 </a> 21 </div> 22 </td> 23</tr>

JS

1<script> 2 $(document).ready(function() { 3 $('.filter_select2').select2({ 4 dropdownAutoWidth: true, 5 width: '250px', 6 }); 7}); 8</script>

CSS

1.error { 2 border-color:red; 3} 4 5.add_table .error { 6 border: 1px solid red; 7} 8.radio-inline{ 9 display: inline-block; 10 margin-bottom: 0; 11 font-weight: normal; 12 vertical-align: middle; 13 cursor: pointer; 14 width: 50px; 15} 16.radio-inline input{ 17 margin-top: 10px; 18} 19 20.add_table .combo-select { 21 float: left; 22 position: relative; 23 font: 100% Helvetica, Arial, Sans-serif; 24 border: 2px #ccc solid; 25 border-radius: 2px; 26 width: 120px; 27} 28 29.demo{width:100%;} 30 .select_side{float:left; width:300px;} 31 .select_side p{margin: 5px;padding: 5px;line-height: 30px; height: 30px;} 32 #selectR{width:300px;} 33 #selectL{width:300px;} 34 .select_opt{float:left; width:40px; height:100%; margin-top:36px} 35 .select_opt p{width:26px; height:26px; margin-top:6px; background:url(/images/arr.gif) no-repeat; cursor:pointer; text-indent:-999em} 36 .select_opt p#toright{background-position:2px 0} 37 .select_opt p#toleft{background-position:2px -22px} 38 .sub_btn{clear:both; height:42px; line-height:42px; padding-top:10px; text-align:center} 39 40 #search_pdf_list_image:hover{cursor: pointer;} 41 #search_pdf_list_image:active{filter:alpha(opacity=50); -moz-opacity:0.5; 42 -khtml-opacity: 0.5; opacity: 0.5; } 43 .user_select{ 44 padding: 3px 5px; 45 height: 250px; 46 } 47 .user_select option { 48 padding: 3px 0px 49 } 50.person .select_large { 51 width: 28%; 52} 53#project_add_table{ 54 border: none; 55} 56 57#form .money{ 58 text-align: right; 59} 60 61.order_dept_cost_sub{ 62 background: rgb(238, 238, 238); 63 border-radius: 5px; 64 display: inline-block; 65 font-weight: normal; 66 padding: 5px 10px; 67 margin-left: 10px; 68} 69 70#order_project_name{ 71 background: transparent; 72 border: none; 73 font-size: 13px; 74 font-weight: bold; 75 outline: none; 76} 77 78.js-children-table{ 79 padding-top: 0; 80 margin: 5px; 81 width:100%; 82} 83 84.js-children-table h3{ 85 color: #333333; 86} 87 88.child_body{ 89 border-left: 2px #e6ecf3 double; 90 display: block; 91} 92 93.child_button{ 94 background: white; 95 border:none; 96 color: #333333; 97 cursor: pointer; 98 float: right; 99 font-size: 1em; 100 margin-right: 25px; 101} 102 103.child_border{ 104 border:1px solid #e6ecf3; 105 width: 98.8%; 106} 107 108#relation_text{ 109 font-size: 0.25rem; 110 margin: 15px 35px 0; 111} 112 113#relation_text .myself{ 114 font-weight: bold; 115} 116 117#relation_text .relation_child{ 118 119} 120 121#relation_text .relation_grand_child{ 122 123} 124 125#relation_text li{ 126 margin-bottom: 7px; 127} 128 129#relation_text li a{ 130 text-decoration: underline; 131} 132 133#no_relation_text{ 134 margin: 15px 35px 0; 135} 136 137.title_item{ 138 color: red; 139 font-size: 5px; 140} 141 142.title_input{ 143 width: 7.5em; 144 font-weight: bold; 145 line-height: 2em !important; 146 margin: .5em 0 0 0; 147 text-align-last:justify; 148} 149 150.error_message{ 151 background: #FADBDA; 152 color: red; 153 padding: 5px 30px 5px; 154} 155 156#costomerInfo{ 157 margin: 0px 0px 8px; 158 width: 940px; 159 height: 170px; 160} 161.select2-dropdown{ 162 font-size: medium; 163} 164 165.select2-selection__arrow b{ 166 display: none; 167} 168.select2-results li{ 169 border-radius: 0; 170 border: none; 171} 172.select2-search{ 173 font-size: medium; 174} 175.rep td span{ 176 min-height: 0; 177 line-height: 0; 178} 179.laborCostSum td span{ 180 line-height: 0.6em; 181} 182.select2-selection__rendered{ 183 display: block; 184 width: 210px; 185 padding-top: 2px; 186} 187#project_status{ 188 height: 35px; 189} 190.datepicker_month{ 191 padding-left:10px; 192} 193.input_short { 194 text-align: center; 195} 196.rep .select2-selection__rendered{ 197 display: block; 198 width: 210px; 199 padding-top: 0px; 200}

#既に試したこと

CSS

1*{ 2 padding: 0px; 3 margin: 0px; 4}

変化なし

HTML

1<span class="dropdown-wrapper" aria-hidden="true"></span>

の開発者モードで該当箇所を削除
隙間を消すことはできたが,もちろんリロードするとまた隙間ができる.

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

css

1/* スタイルシート */ 2*{ 3 padding: 0px; 4 margin: 0px; 5}

投稿2020/05/22 06:36

ForestSeo

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

rikutennis

2020/05/22 06:55

変化ありませんでした
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問