我厌倦了整天寻找解决方案，但无法找到我的标签无效的原因。 当我只编写HTML然后它可以工作，但是一旦我在其中应用CSS，它就停止了工作。 谈论＆＃34;部分开始＆＃34;标签它应与＆＃34; selectbox＆＃34;链接。其他标签工作正常。 当我点击＆＃34; section start＆＃34;标签它应该在选择框上自动对焦（新页面）。
.wrap
{
width: 393px;
height: 545px;
border: 1px solid #0855DD;
border-top: 1px solid #0734DA;
border-color: #004DE3 #00138C #00138C #0855DD;
-webkit-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
-moz-box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
box-shadow: 0 0 0 1px #0855DD inset,0 0 1px 3px #0831D9 inset,0 0 0 2px #166AEE inset;
margin: 20px;
}
.outline, .wrap
{
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
border-radius: 8px 8px 0 0;
}
.outline
{
height: 26px;
width: 391px;
border-bottom: none;
background: #3d95ff;
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));
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%);
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%);
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
{
margin: auto;
}
.out_heading
{
line-height: 27px;
height: 14px;
width: 385px;
margin: 3px;
}
.container, .preview
{
width: 357px;
}
.container
{
height: 427px;
padding: 9px;
padding-left: 7px;
margin-top: 1px;
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #FCFCFE),
color-stop(1, #F4F3EE),
color-stop(1, #FBFBFD),
color-stop(1, #FBFBFC),
color-stop(1, #FBFAFB),
color-stop(1, #FAFBFB),
color-stop(1, #FAFAFA),
color-stop(1, #F9FAF9),
color-stop(1, #F9F8F9),
color-stop(1, #F9F9F8),
color-stop(1, #F8F8F7),
color-stop(1, #F8F7F5),
color-stop(1, #F7F6F4),
color-stop(1, #F6F5F2),
color-stop(1, #F5F5F1),
color-stop(1, #F5F4EF),
color-stop(1, #F5F3F0),
color-stop(1, #F4F3EF)
);
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%);
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%);
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
{
width: 300px;
color: #ffffff;
font: 600 13px arial;
}
.right_img
{
margin-right: 0;
width: 12%;
}
.help_img, .cross_img
{
width: 21px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
.help_img
{
background: url("image/help2.png") no-repeat;
}
.cross_img
{
background: url("image/cross2.png") no-repeat;
}
.page_set_form
{
height: 503px;
width: 379px;
padding: 6px 5px;
background-color: #ECE9D8;
border-top: 1px solid #3879D9;
}
.block_one
{
width: 196px;
right: 37px;
bottom: 10px;
text-align: center;
}
.tab
{
width: 203px;
}
.tab_new, .tab_form_file, .tab_layout, .container
{
border: 1px solid #919B9C;
}
.tab_new, .tab_form_file, .tab_layout
{
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.tab_new
{
width: 50px;
}
.tab_form_file
{
width: 51px;
}
.right_img, .help_img, .cross_img, .sup_endnote, .div_block
{
height: 21px;
}
.tab_new, .tab_form_file
{
height: 18px;
background: #e3e9ec;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e9ec), color-stop(7%,#fdfdfc), color-stop(27%,#f6f6f4), color-stop(100%,#f0f0eb));
background: -webkit-linear-gradient(top, #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%);
background: -moz-linear-gradient(top, #e3e9ec 0%, #fdfdfc 7%, #f6f6f4 27%, #f0f0eb 100%);
background: linear-gradient(to bottom, #e3e9ec 0%,#fdfdfc 7%,#f6f6f4 27%,#f0f0eb 100%);
}
.tab_layout
{
width: 53px;
padding-right: 3px;
line-height: 23px;
border-top: 1px solid #E68B2C;
border-bottom-width: 0;
-webkit-box-shadow: 0 2px 0 0 #FFC83C inset;
-moz-box-shadow: 0 2px 0 0 #FFC83C inset;
box-shadow: 0 2px 0 0 #FFC83C inset;
border-left-width: 0;
bottom: 2px;
background-color: #FCFCFE;
}
.tab_new, .tab_form_file, .tab_layout, .section, .type_checkbox:checked:after
{
display: block;
}
.one_label, .supress_label, .pos, .new_page_select, .div_block
{
position: relative;
}
.one_label, .firstpage_label, .supress_label
{
right: 3px;
}
.side_line, .section_label, .vertical_align, .line, .border
{
height: 0;
}
.side_line
{
border-bottom: 1px solid #D0D0BF;
bottom: 6px;
left: 3px;
}
.section_hr
{
width: 319px;
}
.page, .section
{
padding-top: 8px;
}
.section
{
height: 49px;
}
.section_start
{
display: inline-block;
}
.section_start, .vertical_align
{
line-height: 22px;
}
.section, .section_start, .sup_endnote, .section_select
{
width: 219px;
}
.checkbox_one, .checkbox_two, .section_start
{
height: 19px;
}
.sup_endnote
{
color: #ACA899;
}
.new_page_select
{
border: 1px solid;
bottom: 0;
left: 11px;
}
.font_size, .page_set_form, .button_one
{
font: 11px arial;
}
.apply, .edge, .selectbox_two, .selectbox_one, .tab
{
display: inline-flex;
}
.new_page_select, .header_select, .footer_select, .align_selectbox, .apply_select
{
border: 1px solid #7F9DB9;
overflow: hidden;
}
.new_page_select, .align_selectbox, .apply_select
{
background: url("image/arrow1.png") no-repeat right #ffffff;
}
.odd_even_checkbox, .first_page_checkbox
{
border: 1px solid #1C5180;
background: #dcdcd7;
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#dcdcd7), color-stop(20%,#dcdcd7), color-stop(54%,#f2f2f2), color-stop(100%,#f1f1ef));
background: -webkit-linear-gradient(-45deg, #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%);
background: -moz-linear-gradient(-45deg, #dcdcd7 0%, #dcdcd7 20%, #f2f2f2 54%, #f1f1ef 100%);
background: linear-gradient(135deg, #dcdcd7 0%,#dcdcd7 20%,#f2f2f2 54%,#f1f1ef 100%);
}
.odd_even_checkbox, .first_page_checkbox, .hidden_checkbox , .type_checkbox:checked:after
{
height: 13px;
width: 13px;
}
.odd_even_checkbox, .first_page_checkbox, .hidden_checkbox, .font_size
{
-webkit-appearance: none;
}
.type_checkbox:checked:after
{
background: url(image/checked.png) no-repeat 0 2px;
border: none;
content: '';
margin-bottom: 0;
}
.hidden_checkbox
{
border: 1px solid #ACA899;
}
.headers
{
color: #0046D5;
}
.hnf_hr
{
width: 255px;
}
.head_and_foot
{
height: 91px;
width: 229px;
padding-top: 6px;
}
.head_and_foot, .section
{
padding-left: 6px;
}
.cancel_button, .head_three, .help_img
{
margin-left: 2px;
}
.side_line, .float_right, .header_select, .footer_select, .page_select
{
float: right;
}
.blue_label, .page_set_form, .blue_label_two
{
line-height: 15px;
}
.blue_label.pr
{
line-height: 16px;
}
.blue_label, .blue_label_two
{
height: 12px;
}
.blue_label
{
width: 42px;
}
.blue_label_two
{
width: 103px;
white-space: nowrap;
}
.prev_hr2.prev_hr, .one_label, .firstpage_label, .supress_label
{
bottom: 5px;
}
.checkbox_one, .checkbox_two
{
width: 210px;
}
.left_button, .edge_label, .heading, .help_img, .section_label
{
float: left;
}
.edge_label
{
height: 50px;
width: 100px;
line-height: 45px;
padding: 0;
margin-left: 3px;
}
.tab, .edge_right
{
line-height: 20px;
}
.edge_right
{
height: 55px;
width: 130px;
}
.tab, .selectbox_one
{
padding-top: 2px;
}
.selectbox_one
{
width: 123px;
}
.header_label
{
width: 47px;
}
.head_three
{
width: 61%;
}
.selectbox_two, .app_label
{
width: 122px;
}
.footer_label
{
width: 46px;
}
.foot_select
{
width: 63%;
}
.header_select, .footer_select
{
height: 16px;
width: 68px;
background: url("image/drop.png") no-repeat right #ffffff;
margin-right: 2px;
padding-left: 1px;
}
.section_start
{
padding-left: 3px;
}
.height_value, .button_one
{
height: 22px;
}
.selectbox_two, .section_select, .apply
{
height: 23px;
}
.selectbox_two, .outline
{
padding-top: 1px;
}
.header_select, .align_selectbox
{
margin-left: 8px;
}
.footer_select
{
margin-left: 11px;
}
.new_page_select
{
margin-right: 13px;
}
.edge
{
height: 54px;
width: 222px;
}
.page_hr
{
width: 330px;
}
.page
{
height: 65px;
width: 297px;
padding-left: 8px;
}
.page_contain
{
height: 25px;
width: 217px;
}
.vertical_align
{
width: 206px;
}
.page_select
{
width: 126px;
}
.align_selectbox, .new_page_select, .apply_select
{
width: 119px;
}
.prev_hr
{
width: 316px;
}
.preview
{
height: 148px;
padding-top: 4px;
}
.new_page_select, .img_previous
{
margin-left: 20px;
}
.img_previous
{
height: 113px;
width: 91px;
background: url("image/preview1.png") no-repeat;
border-left: 24px solid transparent;
}
.default_button, .container, .tab_form_file
{
margin-left: 1px;
}
.default_button, .edge_label
{
letter-spacing: 0.3px;
}
.right_button, .left_button
{
height: 24px;
}
.left_button
{
width: 72px;
}
.buttons
{
height: 32px;
width: 377px;
}
.selectbox_two, .heading, .tab
{
height: 20px;
}
.apply_select
{
margin-left: 9px;
}
.line_button
{
margin-left: 6px;
}
.line, .border, .line_button
{
width: 93px;
}
.line
{
width: 191px;
}
.border
{
width: 89px;
}
.select
{
width: 367px;
}
.apply
{
padding-top: 13px;
width: 359px;
}
.app_label, .select, .line, .right_button
{
height: 30px;
}
.app_label, .heading
{
line-height: 24px;
}
.select
{
margin-right: 11px;
}
.section_label, .select, .line
{
width: 120px;
}
.line
{
margin-right: 3px;
}
.border
{
height: 120px;
}
.default_button, .ok_button, .cancel_button, .border_button
{
width: 74px;
}
.border_button
{
margin-left: 7px;
}
.line_button, .border_button, .ok_button, .cancel_button, .default_button
{
background: #ffffff;
border: 1px solid #003C74;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.right_button
{
width: 161px;
}
.ok_button
{
margin: 0 6px 0 3px;
-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;
-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;
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;
outline: 1px dotted #000000;
outline-offset: -4px;
background-color: #FFFFFF;
}
.default_button, .cancel_button, .ok_button
{
margin-top: 10px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
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));
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f3 26%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f3 26%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
}
.line_button, .border_button
{
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));
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f3 15%, #f0f0ea 84%, #ebebe5 89%, #d6d0c5 100%);
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f3 15%,#f0f0ea 84%,#ebebe5 89%,#d6d0c5 100%);
}
::-webkit-input-placeholder
{
color: #000000;
}
.new_page_select, .padding_left, .align_selectbox, .apply_select, .button_one
{
padding-left: 2px;
} <div class="wrap">
<div class="outline">
<div class="out_heading">
<div class="heading">
<label>Page Setup</label>
</div>
<div class="right_img height_value float_right">
<div class="help_img">
</div>
<div class="cross_img float_right">
</div>
</div>
</div>
</div>
<form name="page_setup_form" id="page_setup_form" class="page_set_form">
<div class="block_one div_block">
<ul class="tab">
<li class="tab_new" accesskey="c">Margins</li>
<li class="tab_form_file" accesskey="b">
<label class="form_file">Paper</label>
</li>
<li class="tab_layout div_block">Layout</li>
</ul>
</div>
<div class="container">
<div class="blue_label">
<label class="headers">Section</label>
</div>
<div class="section_hr pos side_line">
</div>
<div class="section">
<div class="section_start">
<div class="section_label">
<label for="hello">Section sta<u>r</u>t:</label>
</div>
<div class="section_select float_right">
<select name="select_start" id="hello" class="new_page_select height_value font_size float_right" accesskey="r">
<option value="1" selected="selected">New page</option>
</select>
</div>
</div>
<div class="sup_endnote">
<input type="checkbox" name="hidden_checkbox" id="hidden_checkbox" class="hidden_checkbox type_checkbox" disabled="disabled"/>
<label class="supress_label">Suppress endnotes</label>
</div>
</div>
<div class="blue_label_two">
<label class="headers">Headers and footers</label>
</div>
<div class="hnf_hr pos side_line">
</div>
<div class="head_and_foot">
<div class="checkbox_one">
<input type="checkbox" name="odd_even_checkbox" id="odd_even_checkbox" class="odd_even_checkbox type_checkbox" accesskey="o"/>
<label class="one_label" for="odd_even_checkbox">Different <u>o</u>dd and even</label>
</div>
<div class="checkbox_two">
<input type="checkbox" name="first_page_checkbox" id="first_page_checkbox" class="first_page_checkbox type_checkbox" accesskey="p"/>
<label class="firstpage_label pos" for="first_page_checkbox">Different first <u>p</u>age</label>
</div>
<div class="edge">
<div class="edge_label">
<label>From edge:</label>
</div>
<div class="edge_right float_right">
<div class="selectbox_one height_value float_right">
<div class="header_label height_value">
<label for="header_select"><u>H</u>eader:</label>
</div>
<div class="head_three height_value">
<input type="number" name="header_select" id="header_select" class="header_select padding_left font_size" placeholder="0.5"" step="0.1" min="0" max="10" accesskey="h"/>
</div>
</div>
<div class="selectbox_two height_value float_right">
<div class="footer_label height_value">
<label for="footer_select"><u>F</u>ooter:</label>
</div>
<div class="foot_select height_value">
<input type="number" name="footer_select" id="footer_select" class="footer_select padding_left font_size" placeholder="0.5"" step="0.1" min="0" max="10" accesskey="f"/>
</div>
</div>
</div>
</div>
</div>
<div class="blue_label">
<label class="headers">Page</label>
</div>
<div class="page_hr pos side_line">
</div>
<div class="page">
<div class="page_contain">
<div class="vertical_align">
<label for="align_selectbox"><u>V</u>ertical alignment:</label>
</div>
<div class="page_select height_value">
<select name="align_selectbox" id="align_selectbox" class="align_selectbox height_value font_size" accesskey="v">
<option value="1" selected="selected">Top</option>
</select>
</div>
</div>
</div>
<div class="blue_label pr">
<label class="headers">Preview</label>
</div>
<div class="prev_hr2 prev_hr pos side_line">
</div>
<div class="preview float_right">
<div class="img_previous">
</div>
<div class="apply">
<div class="app_label">
<label for="apply_selectbox">Appl<u>y</u> to:</label>
</div>
<div class="select">
<select name="apply_selectbox" id="apply_selectbox" class="apply_select height_value font_size" accesskey="y">
<option value="1" selected="selected">This point forward</option>
</select>
</div>
<div class="line">
<button type="button" name="line_no_btn" id="line_no_btn" class="line_button button_one" accesskey="n">Line <u>N</u>umbers...</button>
</div>
<div class="border height_value">
<button type="button" name="border_btn" id="border_btn" class="border_button button_one" accesskey="b"><u>B</u>orders...</button>
</div>
</div>
</div>
</div>
<div class="buttons">
<div class="left_button">
<button type="button" name="default_button" id="default_button" class="default_button button_one" accesskey="d"><u>D</u>efault...</button>
</div>
<div class="right_button float_right">
<input type="button" name="ok_button" id="ok_button" class="ok_button button_one" value="OK" autofocus="autofocus"/>
<input type="button" name="cancel_button" id="cancel_button" class="cancel_button button_one float_right" value="Cancel"/>
</div>
</div>
</form>
</div>
答案 0 :(得分：2)
添加此CSS规则 div.section_select width设置为219 px覆盖标签文本，因此使其宽度自动
.section_select {
width:auto;
}
Link for reference 希望这有效..