Question

这是我的代码：

<h3 align="center">Is the mobile number above correct ?</h3>
    <div class="yesno"><a href="bugme_pay.php"><div id="yes">YES</div></a>
    &nbsp;&nbsp;&nbsp;<a href="#" class="nope"><div id="no">NO</div></a></div>

这是我的CSS：

/* yes and no buttons */

#yes
{
    float:left;
    display:inline;
    width:180px;
    background: #999999;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding-top: 10px;padding-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}
#yes a:visited,
#yes a:link{
color: #fff;
}

#yes:hover {
background-color: #9fd106;
cursor:pointer;
}

#no
{
    float:right;
    display:inline;
    width:180px;
    background: #999999;
    font-size: 26px;
    font-weight: bold;
    text-align: center;
    color: #FFF;
    padding-top: 10px;padding-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-bottom: 0.4em;
    margin-top: 0.4em;
}
#no a:visited,
#no a:link{
color: #fff;
}
#no:hover {
background-color: #f20909;
cursor:pointer;
}
.yesno
{
width:400px;
margin-left:100px;
}

这就是问题所在：

Buttons misaligned

我也有div开关来隐藏/显示div。这是：

<!--show hide div logic-->
<style> 
div#a {  }
div#b { display:none; }
</style>
<script type="text/javascript">
$("a.nope").click(function(){
                 $("#a").hide();
                 $("#b").show();
                 return false;
         });
         </script>
    <!--//end show hide div logic-->

Answer 1

您不能围绕块元素（div）包装内联元素（a）。使用SPAN代替DIV，因为span是内联元素。

使用类似的东西：

<h3 align="center">Is the mobile number above correct ?</h3>
<div class="yesno">
   <span id="yes"><a href="#">YES</a></span>
   <span id="no"><a href="#" class="nope">NO</a></span>
</div>

Answer 2

#yes和#no的宽度均为180px，因此按钮自身消耗360px。包含<div class="yesno">的宽度为400px，因此剩下40px。你还有三个不间断的空间。如果你把不间断的空间拿出去，那么一切都会很好，所以我猜测IE为不间断的空间分配超过40px。

您可以使.yesno更宽，以适应各种浏览器呈现不间断空格的方式，或者您可以放弃  kludge并在#yes上显示明确的宽度， #no和.yesno负责保持按钮分开。

是的，你应该在这里使用<span>而不是<div>，正如GlennG所说，但这不会导致问题。

Answer 3

或者只是将按钮放在容器div中：

#colcontainer {
float:left;
width:100%;

}

把那个div放在你的按钮周围。

应该这样做。

Answer 4

Glenn是正确的，你不能在INLINE元素（如A标签）中拥有像DIV这样的BLOCK元素。

穆是短也是正确的。

Addtioanly你不应该包括在内 NBSP;你应该使用CSS格式化。您还可以删除大量不合理的HTML标记和CSS

例如http://jsbin.com/agojo4/5/edit

这可以进一步改进，但这只是一个2分钟的工作。

Internet Explorer（CSS）中未对齐的按钮

4 个答案: