Question

我有几个隐藏的单选按钮，并被带有背景图像的标签遮盖。我的问题是标签没有在div的左侧对齐，而是排列在靠近中间的地方。我几个小时都在捣乱，无法弄明白。我的网站可以在这里看到：http://envisionhomedesign.com/derek/test12/index.html

CSS：

.button {
visibility:hidden;
clip:rect(0 0 0 0);
position: absolute;
}
label {
background-image: url("Images/Blue Button.png");
background-size: 130px;
background-repeat: no-repeat;
width: 130px;
height: 30px;
display: block;
float: left;
margin-right: 50px;
text-align:center;
font-size:small;
font-weight: 700;
padding-top:7px;
font-family: 'Lucida Sans Unicode, Lucida Grade, sans-serif';
}

.button:checked + label {
background-image: url("Images/Clicked Button.png");}
 input[type=button] { 
font-family: 'ubuntu', sans-serif;
width: 130px; 
height:30px;
background:transparent;
float:none;}

HTML：

<div id="leftcolumn">
<div id="buttonDeadspace"></div>
<form action="#">
<ul>
<li>
<input type="radio" class="button" name="buttonGroup"  onclick="Roof_Stylei_HipGroup();"  id="button0a" checked/>
<label for="button0a">Roof Style: Hip</label>
</li>
<li>
<input type="radio" class="button" name="buttonGroup"  onclick="Roof_Stylei_GableGroup();"  id="button0b" />
<label for="button0b">Roof Style: Gable</label>
</li>
 </ul>
</form>
<div id="buttonGuide0">Click above to begin</div>
<div id="groups0" style="visibility:hidden">
<form action="#">
<ul>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Board_n_Batten();" id="button01" checked/>
<label for="button01" onmouseover="mouseOver('Board_n_BattenMouseover');" onmouseout="mouseOff('Board_n_BattenMouseover');">Board & Batten</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Door();" id="button02" />
<label for="button02" onmouseover="mouseOver('DoorMouseover');" onmouseout="mouseOff('DoorMouseover');">Door</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Garrage_Door();" id="button03" />
<label for="button03" onmouseover="mouseOver('Garrage_DoorMouseover');" onmouseout="mouseOff('Garrage_DoorMouseover');">Garrage Door</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Roof();" id="button04" />
<label for="button04" onmouseover="mouseOver('RoofMouseover');" onmouseout="mouseOff('RoofMouseover');">Roof</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Shake();" id="button05" />
<label for="button05" onmouseover="mouseOver('ShakeMouseover');" onmouseout="mouseOff('ShakeMouseover');">Shake</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Siding();" id="button06" />
<label for="button06" onmouseover="mouseOver('SidingMouseover');" onmouseout="mouseOff('SidingMouseover');">Siding</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Stone();" id="button07" />
<label for="button07" onmouseover="mouseOver('StoneMouseover');" onmouseout="mouseOff('StoneMouseover');">Stone</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Trim();" id="button08" />
<label for="button08" onmouseover="mouseOver('TrimMouseover');" onmouseout="mouseOff('TrimMouseover');">Trim</label>
</li>
<li>
<input type="radio" class="button" name="buttonSubGroup" onclick="Window();" id="button09" />
<label for="button09" onmouseover="mouseOver('WindowMouseover');" onmouseout="mouseOff('WindowMouseover');">Window</label>
</li>
</ul>
</form>
</div>
<div id="buttonDeadspace"></div>
</div>

Answer 1

大多数浏览器都会向ul元素添加一些填充和边距。这种样式导致左列中的内容转移并溢出。您可以显式设置此填充/边距以覆盖浏览器细节。

ul { padding:0; margin:0; }

Answer 2

变化：

text-align:center;

要：

text-align:left;

标签{}

还要添加一个新类：

label { float:left}

标签没有排在div的左侧

2 个答案: