2017-07-07 6 views
2

私は一日中解決策を探すのに飽き飽きしていますが、なぜ私のラベルが機能していないのかわかりません。 HTMLだけを書き込むと動作しますが、すぐにCSSを適用すると動作しなくなります。 "Section Start"ラベルについては、 "selectbox"とリンクする必要があります。他のラベルは問題ありません。 「セクション開始」ラベルをクリックすると、選択ボックス(新しいページ)にオートフォーカスする必要があります。選択ボックスでラベルが機能しない

.wrap 
 
    { 
 
    \t width: 393px; 
 
    \t height: 545px; 
 
    \t border: 1px solid #0855DD; 
 
    \t border-top: 1px solid #0734DA; 
 
    \t border-color: #004DE3 #00138C#00138C#0855DD; 
 
    \t -webkit-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset; 
 
    \t -moz-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset; 
 
    \t box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset; 
 
    \t margin: 20px; 
 
    } 
 
    .outline, .wrap 
 
    { 
 
    \t -webkit-border-radius: 8px 8px 0 0; 
 
    \t -moz-border-radius: 8px 8px 0 0; 
 
    \t border-radius: 8px 8px 0 0; 
 
    } 
 
    .outline 
 
    { 
 
    \t height: 26px; 
 
    \t width: 391px; 
 
    \t border-bottom: none; 
 
    \t background: #3d95ff; 
 
    \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3d95ff), color-stop(4%,#2b90ff), color-stop(8%,#0372ff), color-stop(12%,#0365f1), color-stop(16%,#005cec), color-stop(20%,#0058e6), color-stop(28%,#0054e3), color-stop(48%,#0055e5), color-stop(60%,#0058ee), color-stop(68%,#0160f5), color-stop(72%,#0060f9), color-stop(76%,#0164f9), color-stop(80%,#026afe), color-stop(88%,#036eff), color-stop(96%,#0368fa), color-stop(100%,#0060f9)); 
 
    \t background: -webkit-linear-gradient(top, #3d95ff 0%,#2b90ff 4%,#0372ff 8%,#0365f1 12%,#005cec 16%,#0058e6 20%,#0054e3 28%,#0055e5 48%,#0058ee 60%,#0160f5 68%,#0060f9 72%,#0164f9 76%,#026afe 80%,#036eff 88%,#0368fa 96%,#0060f9 100%); 
 
    \t background: -moz-linear-gradient(top, #3d95ff 0%, #2b90ff 4%, #0372ff 8%, #0365f1 12%, #005cec 16%, #0058e6 20%, #0054e3 28%, #0055e5 48%, #0058ee 60%, #0160f5 68%, #0060f9 72%, #0164f9 76%, #026afe 80%, #036eff 88%, #0368fa 96%, #0060f9 100%); 
 
    \t background: linear-gradient(to bottom, #3d95ff 0%,#2b90ff 4%,#0372ff 8%,#0365f1 12%,#005cec 16%,#0058e6 20%,#0054e3 28%,#0055e5 48%,#0058ee 60%,#0160f5 68%,#0060f9 72%,#0164f9 76%,#026afe 80%,#036eff 88%,#0368fa 96%,#0060f9 100%); 
 
    } 
 
    .outline, .container, .page_set_form, .out_heading 
 
    { 
 
    \t margin: auto; 
 
    } 
 
    .out_heading 
 
    { 
 
    \t line-height: 27px; 
 
    \t height: 14px; 
 
    \t width: 385px; 
 
    \t margin: 3px; 
 
    } 
 
    .container, .preview 
 
    { 
 
    \t width: 357px; 
 
    } 
 
    .container 
 
    { 
 
    \t height: 427px; 
 
    \t padding: 9px; 
 
    \t padding-left: 7px; 
 
    \t margin-top: 1px; 
 
    \t background-image: -webkit-gradient(
 
    \t linear, 
 
    \t left top, 
 
    \t left bottom, 
 
    \t color-stop(0, #FCFCFE), 
 
    \t color-stop(1, #F4F3EE), 
 
    \t color-stop(1, #FBFBFD), 
 
    \t color-stop(1, #FBFBFC), 
 
    \t color-stop(1, #FBFAFB), 
 
    \t color-stop(1, #FAFBFB), 
 
    \t color-stop(1, #FAFAFA), 
 
    \t color-stop(1, #F9FAF9), 
 
    \t color-stop(1, #F9F8F9), 
 
    \t color-stop(1, #F9F9F8), 
 
    \t color-stop(1, #F8F8F7), 
 
    \t color-stop(1, #F8F7F5), 
 
    \t color-stop(1, #F7F6F4), 
 
    \t color-stop(1, #F6F5F2), 
 
    \t color-stop(1, #F5F5F1), 
 
    \t color-stop(1, #F5F4EF), 
 
    \t color-stop(1, #F5F3F0), 
 
    \t color-stop(1, #F4F3EF) 
 
    \t); 
 
    \t background-image: -webkit-linear-gradient(bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%); 
 
    \t background-image: -moz-linear-gradient(bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%); 
 
    \t background-image: linear-gradient(to bottom, #FCFCFE 0%, #F4F3EE 100%, #FBFBFD 100%, #FBFBFC 100%, #FBFAFB 100%, #FAFBFB 100%, #FAFAFA 100%, #F9FAF9 100%, #F9F8F9 100%, #F9F9F8 100%, #F8F8F7 100%, #F8F7F5 100%, #F7F6F4 100%, #F6F5F2 100%, #F5F5F1 100%, #F5F4EF 100%, #F5F3F0 100%, #F4F3EF 100%); 
 
    } 
 
    .heading 
 
    { 
 
    \t width: 300px; 
 
    \t color: #ffffff; 
 
    \t font: 600 13px arial; 
 
    } 
 
    .right_img 
 
    { 
 
    \t margin-right: 0; 
 
    \t width: 12%; 
 
    } 
 
    .help_img, .cross_img 
 
    { 
 
    \t width: 21px; 
 
    \t -webkit-border-radius: 1px; 
 
    \t -moz-border-radius: 1px; 
 
    \t border-radius: 1px; 
 
    } 
 
    .help_img 
 
    { 
 
    \t background: url("image/help2.png") no-repeat; 
 
    } 
 
    .cross_img 
 
    { 
 
    \t background: url("image/cross2.png") no-repeat; 
 
    } 
 
    .page_set_form 
 
    { 
 
    \t height: 503px; 
 
    \t width: 379px; 
 
    \t padding: 6px 5px; 
 
    \t background-color: #ECE9D8; 
 
    \t border-top: 1px solid #3879D9; 
 
    } 
 
    .block_one 
 
    { 
 
    \t width: 196px; 
 
    \t right: 37px; 
 
    \t bottom: 10px; 
 
    \t text-align: center; 
 
    } 
 
    .tab 
 
    { 
 
    \t width: 203px; 
 
    } 
 
    .tab_new, .tab_form_file, .tab_layout, .container 
 
    { 
 
    \t border: 1px solid #919B9C; 
 
    } 
 
    .tab_new, .tab_form_file, .tab_layout 
 
    { 
 
    \t -webkit-border-radius: 4px 4px 0 0; 
 
    \t -moz-border-radius: 4px 4px 0 0; 
 
    \t border-radius: 4px 4px 0 0; 
 
    } 
 
    .tab_new 
 
    { 
 
    \t width: 50px; 
 
    } 
 
    .tab_form_file 
 
    { 
 
    \t width: 51px; 
 
    } 
 
    .right_img, .help_img, .cross_img, .sup_endnote, .div_block 
 
    { 
 
    \t height: 21px; 
 
    } 
 
    .tab_new, .tab_form_file 
 
    { 
 
    \t height: 18px; 
 
    \t background: #e3e9ec; 
 
    \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e9ec), color-stop(7%,#fdfdfc), color-stop(27%,#f6f6f4), color-stop(100%,#f0f0eb)); 
 
    \t background: -webkit-linear-gradient(top, #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%); 
 
    \t background: -moz-linear-gradient(top, #e3e9ec 0%, #fdfdfc 7%, #f6f6f4 27%, #f0f0eb 100%); 
 
    \t background: linear-gradient(to bottom, #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%); 
 
    } 
 
    .tab_layout 
 
    { 
 
    \t width: 53px; 
 
    \t padding-right: 3px; 
 
    \t line-height: 23px; 
 
    \t border-top: 1px solid #E68B2C; 
 
    \t border-bottom-width: 0; 
 
    \t -webkit-box-shadow: 0 2px 0 0 #FFC83C inset; 
 
    \t -moz-box-shadow: 0 2px 0 0 #FFC83C inset; 
 
    \t box-shadow: 0 2px 0 0 #FFC83C inset; 
 
    \t border-left-width: 0; 
 
    \t bottom: 2px; 
 
    \t background-color: #FCFCFE; 
 
    } 
 
    .tab_new, .tab_form_file, .tab_layout, .section, .type_checkbox:checked:after 
 
    { 
 
    \t display: block; 
 
    } 
 
    .one_label, .supress_label, .pos, .new_page_select, .div_block 
 
    { 
 
    \t position: relative; 
 
    } 
 
    .one_label, .firstpage_label, .supress_label 
 
    { 
 
    \t right: 3px; 
 
    } 
 
    .side_line, .section_label, .vertical_align, .line, .border 
 
    { 
 
    \t height: 0; 
 
    } 
 
    .side_line 
 
    { 
 
    \t border-bottom: 1px solid #D0D0BF; 
 
    \t bottom: 6px; 
 
    \t left: 3px; 
 
    } 
 
    .section_hr 
 
    { 
 
    \t width: 319px; 
 
    } 
 
    .page, .section 
 
    { 
 
    \t padding-top: 8px; 
 
    } 
 
    .section 
 
    { 
 
    \t height: 49px; 
 
    } 
 
    .section_start 
 
    { 
 
    \t display: inline-block; 
 
    } 
 
    .section_start, .vertical_align 
 
    { 
 
    \t line-height: 22px; 
 
    } 
 
    .section, .section_start, .sup_endnote, .section_select 
 
    { 
 
    \t width: 219px; 
 
    } 
 
    .checkbox_one, .checkbox_two, .section_start 
 
    { 
 
    \t height: 19px; 
 
    } 
 
    .sup_endnote 
 
    { 
 
    \t color: #ACA899; 
 
    } 
 
    .new_page_select 
 
    { 
 
    \t border: 1px solid; 
 
    \t bottom: 0; 
 
    \t left: 11px; 
 
    } 
 
    .font_size, .page_set_form, .button_one 
 
    { 
 
    \t font: 11px arial; 
 
    } 
 
    .apply, .edge, .selectbox_two, .selectbox_one, .tab 
 
    { 
 
    \t display: inline-flex; 
 
    } 
 
    .new_page_select, .header_select, .footer_select, .align_selectbox, .apply_select 
 
    { 
 
    \t border: 1px solid #7F9DB9; 
 
    \t overflow: hidden; 
 
    } 
 
    .new_page_select, .align_selectbox, .apply_select 
 
    { 
 
    \t background: url("image/arrow1.png") no-repeat right #ffffff; 
 
    } 
 
    .odd_even_checkbox, .first_page_checkbox 
 
    { 
 
    \t border: 1px solid #1C5180; 
 
    \t background: #dcdcd7; 
 
    \t background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dcdcd7), color-stop(20%,#dcdcd7), color-stop(54%,#f2f2f2), color-stop(100%,#f1f1ef)); 
 
    \t background: -webkit-linear-gradient(-45deg, #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%); 
 
    \t background: -moz-linear-gradient(-45deg, #dcdcd7 0%, #dcdcd7 20%, #f2f2f2 54%, #f1f1ef 100%); 
 
    \t background: linear-gradient(135deg, #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%); 
 
    } 
 
    .odd_even_checkbox, .first_page_checkbox, .hidden_checkbox , .type_checkbox:checked:after 
 
    { 
 
    \t height: 13px; 
 
    \t width: 13px; 
 
    } 
 
    .odd_even_checkbox, .first_page_checkbox, .hidden_checkbox, .font_size 
 
    { 
 
    \t -webkit-appearance: none; 
 
    } 
 
    .type_checkbox:checked:after 
 
    { 
 
    \t background: url(image/checked.png) no-repeat 0 2px; 
 
    \t border: none; 
 
    \t content: ''; 
 
    \t margin-bottom: 0; 
 
    } 
 
    .hidden_checkbox 
 
    { 
 
    \t border: 1px solid #ACA899; 
 
    } 
 
    .headers 
 
    { 
 
    \t color: #0046D5; 
 
    } 
 
    .hnf_hr 
 
    { 
 
    \t width: 255px; 
 
    } 
 
    .head_and_foot 
 
    { 
 
    \t height: 91px; 
 
    \t width: 229px; 
 
    \t padding-top: 6px; 
 
    } 
 
    .head_and_foot, .section 
 
    { 
 
    \t padding-left: 6px; 
 
    } 
 
    .cancel_button, .head_three, .help_img 
 
    { 
 
    \t margin-left: 2px; 
 
    } 
 
    .side_line, .float_right, .header_select, .footer_select, .page_select 
 
    { 
 
    \t float: right; 
 
    } 
 
    .blue_label, .page_set_form, .blue_label_two 
 
    { 
 
    \t line-height: 15px; 
 
    } 
 
    .blue_label.pr 
 
    { 
 
    \t line-height: 16px; 
 
    } 
 
    .blue_label, .blue_label_two 
 
    { 
 
    \t height: 12px; 
 
    } 
 
    .blue_label 
 
    { 
 
    \t width: 42px; 
 
    } 
 
    .blue_label_two 
 
    { 
 
    \t width: 103px; 
 
    \t white-space: nowrap; 
 
    } 
 
    .prev_hr2.prev_hr, .one_label, .firstpage_label, .supress_label 
 
    { 
 
    \t bottom: 5px; 
 
    } 
 
    .checkbox_one, .checkbox_two 
 
    { 
 
    \t width: 210px; 
 
    } 
 
    .left_button, .edge_label, .heading, .help_img, .section_label 
 
    { 
 
    \t float: left; 
 
    } 
 
    .edge_label 
 
    { 
 
    \t height: 50px; 
 
    \t width: 100px; 
 
    \t line-height: 45px; 
 
    \t padding: 0; 
 
    \t margin-left: 3px; 
 
    } 
 
    .tab, .edge_right 
 
    { 
 
    \t line-height: 20px; 
 
    } 
 
    .edge_right 
 
    { 
 
    \t height: 55px; 
 
    \t width: 130px; 
 
    } 
 
    .tab, .selectbox_one 
 
    { 
 
    \t padding-top: 2px; 
 
    } 
 
    .selectbox_one 
 
    { 
 
    \t width: 123px; 
 
    } 
 
    .header_label 
 
    { 
 
    \t width: 47px; 
 
    } 
 
    .head_three 
 
    { 
 
    \t width: 61%; 
 
    } 
 
    .selectbox_two, .app_label 
 
    { 
 
    \t width: 122px; 
 
    } 
 
    .footer_label 
 
    { 
 
    \t width: 46px; 
 
    } 
 
    .foot_select 
 
    { 
 
    \t width: 63%; 
 
    } 
 
    .header_select, .footer_select 
 
    { 
 
    \t height: 16px; 
 
    \t width: 68px; 
 
    \t background: url("image/drop.png") no-repeat right #ffffff; 
 
    \t margin-right: 2px; 
 
    \t padding-left: 1px; 
 
    } 
 
    .section_start 
 
    { 
 
    \t padding-left: 3px; 
 
    } 
 
    .height_value, .button_one 
 
    { 
 
    \t height: 22px; 
 
    } 
 
    .selectbox_two, .section_select, .apply 
 
    { 
 
    \t height: 23px; 
 
    } 
 
    .selectbox_two, .outline 
 
    { 
 
    \t padding-top: 1px; 
 
    } 
 
    .header_select, .align_selectbox 
 
    { 
 
    \t margin-left: 8px; 
 
    } 
 
    .footer_select 
 
    { 
 
    \t margin-left: 11px; 
 
    } 
 
    .new_page_select 
 
    { 
 
    \t margin-right: 13px; 
 
    } 
 
    .edge 
 
    { 
 
    \t height: 54px; 
 
    \t width: 222px; 
 
    } 
 
    .page_hr 
 
    { 
 
    \t width: 330px; 
 
    } 
 
    .page 
 
    { 
 
    \t height: 65px; 
 
    \t width: 297px; 
 
    \t padding-left: 8px; 
 
    } 
 
    .page_contain 
 
    { 
 
    \t height: 25px; 
 
    \t width: 217px; 
 
    } 
 
    .vertical_align 
 
    { 
 
    \t width: 206px; 
 
    } 
 
    .page_select 
 
    { 
 
    \t width: 126px; 
 
    } 
 
    .align_selectbox, .new_page_select, .apply_select 
 
    { 
 
    \t width: 119px; 
 
    } 
 
    .prev_hr 
 
    { 
 
    \t width: 316px; 
 
    } 
 
    .preview 
 
    { 
 
    \t height: 148px; 
 
    \t padding-top: 4px; 
 
    } 
 
    .new_page_select, .img_previous 
 
    { 
 
    \t margin-left: 20px; 
 
    } 
 
    .img_previous 
 
    { 
 
    \t height: 113px; 
 
    \t width: 91px; 
 
    \t background: url("image/preview1.png") no-repeat; 
 
    \t border-left: 24px solid transparent; 
 
    } 
 
    .default_button, .container, .tab_form_file 
 
    { 
 
    \t margin-left: 1px; 
 
    } 
 
    .default_button, .edge_label 
 
    { 
 
    \t letter-spacing: 0.3px; 
 
    } 
 
    .right_button, .left_button 
 
    { 
 
    \t height: 24px; 
 
    } 
 
    .left_button 
 
    { 
 
    \t width: 72px; 
 
    } 
 
    .buttons 
 
    { 
 
    \t height: 32px; 
 
    \t width: 377px; 
 
    } 
 
    .selectbox_two, .heading, .tab 
 
    { 
 
    \t height: 20px; 
 
    } 
 
    .apply_select 
 
    { 
 
    \t margin-left: 9px; 
 
    } 
 
    .line_button 
 
    { 
 
    \t margin-left: 6px; 
 
    } 
 
    .line, .border, .line_button 
 
    { 
 
    \t width: 93px; 
 
    } 
 
    .line 
 
    { 
 
    \t width: 191px; 
 
    } 
 
    .border 
 
    { 
 
    \t width: 89px; 
 
    } 
 
    .select 
 
    { 
 
     width: 367px; 
 
    } 
 
    .apply 
 
    { 
 
    \t padding-top: 13px; 
 
    \t width: 359px; 
 
    } 
 
    .app_label, .select, .line, .right_button 
 
    { 
 
    \t height: 30px; 
 
    } 
 
    .app_label, .heading 
 
    { 
 
    \t line-height: 24px; 
 
    } 
 
    .select 
 
    { 
 
    \t margin-right: 11px; 
 
    } 
 
    .section_label, .select, .line 
 
    { 
 
    \t width: 120px; 
 
    } 
 
    .line 
 
    { 
 
    \t margin-right: 3px; 
 
    } 
 
    .border 
 
    { 
 
    \t height: 120px; 
 
    } 
 
    .default_button, .ok_button, .cancel_button, .border_button 
 
    { 
 
    \t width: 74px; 
 
    } 
 
    .border_button 
 
    { 
 
    \t margin-left: 7px; 
 
    } 
 
    .line_button, .border_button, .ok_button, .cancel_button, .default_button 
 
    { 
 
    \t background: #ffffff; 
 
    \t border: 1px solid #003C74; 
 
    \t -webkit-border-radius: 3px; 
 
    \t -moz-border-radius: 3px; 
 
    \t border-radius: 3px; 
 
    } 
 
    .right_button 
 
    { 
 
    \t width: 161px; 
 
    } 
 
    .ok_button 
 
    { 
 
    \t margin: 0 6px 0 3px; 
 
    \t -webkit-box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset; 
 
    \t -moz-box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset; 
 
    \t box-shadow: 0 1px 0 1px #CEE7FF inset,3px 0 0 -1px #bcd4f6 inset, 0 0px 0 2px #6982EE inset, 3px 0 0 0 #99B8EA inset; 
 
    \t outline: 1px dotted #000000; 
 
    \t outline-offset: -4px; 
 
    \t background-color: #FFFFFF; 
 
    } 
 
    .default_button, .cancel_button, .ok_button 
 
    { 
 
    \t margin-top: 10px; 
 
    \t -webkit-border-radius: 2px; 
 
    \t -moz-border-radius: 2px; 
 
    \t border-radius: 2px; 
 
    \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(26%,#f6f6f3), color-stop(84%,#f0f0ea), color-stop(89%,#ebebe5), color-stop(100%,#d6d0c5)); 
 
    \t background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%); 
 
    \t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f3 26%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%); 
 
    \t background: linear-gradient(to bottom, #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%); 
 
    } 
 
    .line_button, .border_button 
 
    { 
 
    \t background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(15%,#f6f6f3), color-stop(84%,#f0f0ea), color-stop(89%,#ebebe5), color-stop(100%,#d6d0c5)); 
 
    \t background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%); 
 
    \t background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f3 15%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%); 
 
    \t background: linear-gradient(to bottom, #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%); 
 
    } 
 
    ::-webkit-input-placeholder 
 
    { 
 
    \t color: #000000; 
 
    } 
 
    .new_page_select, .padding_left, .align_selectbox, .apply_select, .button_one 
 
    { 
 
    \t padding-left: 2px; 
 
    }
<div class="wrap"> 
 
    \t \t \t 
 
    <div class="outline"> 
 
\t \t <div class="out_heading"> 
 
\t \t \t <div class="heading"> 
 
\t \t \t \t <label>Page Setup</label> 
 
\t \t \t </div> 
 
\t \t \t <div class="right_img height_value float_right"> 
 
\t \t \t \t <div class="help_img"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="cross_img float_right"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <form name="page_setup_form" id="page_setup_form" class="page_set_form"> 
 
\t \t <div class="block_one div_block"> 
 
\t \t \t <ul class="tab"> 
 
\t \t \t \t <li class="tab_new" accesskey="c">Margins</li> 
 
\t \t \t \t <li class="tab_form_file" accesskey="b"> 
 
\t \t \t \t \t <label class="form_file">Paper</label> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li class="tab_layout div_block">Layout</li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t \t <div class="container"> 
 
\t \t \t <div class="blue_label"> 
 
\t \t \t \t <label class="headers">Section</label> 
 
\t \t \t </div> 
 
\t \t \t <div class="section_hr pos side_line"> 
 
\t \t \t </div> 
 
\t \t \t <div class="section"> 
 
\t \t \t \t <div class="section_start"> 
 
\t \t \t \t \t <div class="section_label"> 
 
\t \t \t \t \t \t <label for="hello">Section sta<u>r</u>t:</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="section_select float_right"> 
 
\t \t \t \t \t \t <select name="select_start" id="hello" class="new_page_select height_value font_size float_right" accesskey="r"> 
 
\t \t \t \t \t \t \t <option value="1" selected="selected">New page</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="sup_endnote"> 
 
\t \t \t \t \t <input type="checkbox" name="hidden_checkbox" id="hidden_checkbox" class="hidden_checkbox type_checkbox" disabled="disabled"/> 
 
\t \t \t \t \t <label class="supress_label">Suppress endnotes</label> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="blue_label_two"> 
 
\t \t \t \t <label class="headers">Headers and footers</label> 
 
\t \t \t </div> 
 
\t \t \t <div class="hnf_hr pos side_line"> 
 
\t \t \t </div> 
 
\t \t \t <div class="head_and_foot"> 
 
\t \t \t \t <div class="checkbox_one"> 
 
\t \t \t \t \t <input type="checkbox" name="odd_even_checkbox" id="odd_even_checkbox" class="odd_even_checkbox type_checkbox" accesskey="o"/> 
 
\t \t \t \t \t <label class="one_label" for="odd_even_checkbox">Different <u>o</u>dd and even</label> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="checkbox_two"> 
 
\t \t \t \t \t <input type="checkbox" name="first_page_checkbox" id="first_page_checkbox" class="first_page_checkbox type_checkbox" accesskey="p"/> 
 
\t \t \t \t \t <label class="firstpage_label pos" for="first_page_checkbox">Different first <u>p</u>age</label> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="edge"> 
 
\t \t \t \t \t <div class="edge_label"> 
 
\t \t \t \t \t \t <label>From edge:</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="edge_right float_right"> 
 
\t \t \t \t \t \t <div class="selectbox_one height_value float_right"> 
 
\t \t \t \t \t \t \t <div class="header_label height_value"> 
 
\t \t \t \t \t \t \t \t <label for="header_select"><u>H</u>eader:</label> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="head_three height_value"> 
 
\t \t \t \t \t \t \t \t <input type="number" name="header_select" id="header_select" class="header_select padding_left font_size" placeholder="0.5&#34;" step="0.1" min="0" max="10" accesskey="h"/> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="selectbox_two height_value float_right"> 
 
\t \t \t \t \t \t \t <div class="footer_label height_value"> 
 
\t \t \t \t \t \t \t \t <label for="footer_select"><u>F</u>ooter:</label> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="foot_select height_value"> 
 
\t \t \t \t \t \t \t \t <input type="number" name="footer_select" id="footer_select" class="footer_select padding_left font_size" placeholder="0.5&quot;" step="0.1" min="0" max="10" accesskey="f"/> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="blue_label"> 
 
\t \t \t \t <label class="headers">Page</label> 
 
\t \t \t </div> 
 
\t \t \t <div class="page_hr pos side_line"> 
 
\t \t \t </div> 
 
\t \t \t <div class="page"> 
 
\t \t \t \t <div class="page_contain"> 
 
\t \t \t \t \t <div class="vertical_align"> 
 
\t \t \t \t \t \t <label for="align_selectbox"><u>V</u>ertical alignment:</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="page_select height_value"> 
 
\t \t \t \t \t \t <select name="align_selectbox" id="align_selectbox" class="align_selectbox height_value font_size" accesskey="v"> 
 
\t \t \t \t \t \t \t <option value="1" selected="selected">Top</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="blue_label pr"> 
 
\t \t \t \t <label class="headers">Preview</label> 
 
\t \t \t </div> 
 
\t \t \t <div class="prev_hr2 prev_hr pos side_line"> 
 
\t \t \t </div> 
 
\t \t \t <div class="preview float_right"> 
 
\t \t \t \t <div class="img_previous"> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="apply"> 
 
\t \t \t \t \t <div class="app_label"> 
 
\t \t \t \t \t \t <label for="apply_selectbox">Appl<u>y</u> to:</label> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="select"> 
 
\t \t \t \t \t \t <select name="apply_selectbox" id="apply_selectbox" class="apply_select height_value font_size" accesskey="y"> 
 
\t \t \t \t \t \t \t <option value="1" selected="selected">This point forward</option> 
 
\t \t \t \t \t \t </select> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="line"> 
 
\t \t \t \t \t \t <button type="button" name="line_no_btn" id="line_no_btn" class="line_button button_one" accesskey="n">Line <u>N</u>umbers...</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="border height_value"> 
 
\t \t \t \t \t \t <button type="button" name="border_btn" id="border_btn" class="border_button button_one" accesskey="b"><u>B</u>orders...</button> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div class="buttons"> 
 
\t \t \t <div class="left_button"> 
 
\t \t \t \t <button type="button" name="default_button" id="default_button" class="default_button button_one" accesskey="d"><u>D</u>efault...</button> 
 
\t \t \t </div> 
 
\t \t \t <div class="right_button float_right"> 
 
\t \t \t \t <input type="button" name="ok_button" id="ok_button" class="ok_button button_one" value="OK" autofocus="autofocus"/> 
 
\t \t \t \t <input type="button" name="cancel_button" id="cancel_button" class="cancel_button button_one float_right" value="Cancel"/> 
 
\t \t \t </div> 
 
\t \t </div> 
 
     </form> 
 
    </div>

+0

達成したいことは何ですか? –

+0

何がうまくいかないのか分かりません。あなたはどういう意味ですか... – Kiwad

+0

"セクション開始"を押すと、自動的に選択ボックス(新しいページ)にオートフォーカスされます: - 垂直アライメントラベルをクリックします。 –

答えて

2

div.section_select幅はラベルテキストをカバーする219ピクセルに設定されているので、その幅の自動

.section_select { 
width:auto; 
} 

Link for reference は、この作品を期待します。このCSSルールを追加します。

+0

それはありがとうと問題を説明してください。私が幅を減らすと、構造が乱れる。 –

+0

幅が問題で、2つのブロックレベルの要素(div)を並べて配置し、代わりにdisplayプロパティを使用してインラインブロック要素にします。親要素と子要素を同じ幅にします –

関連する問題