html - 为什么我的 链接在这个 float 中不起作用？

Question

我一辈子都弄不明白为什么我的 float:right 没有正确显示超链接。我最初认为它不在正确的 z-index 上，但现在我很困惑。有什么东西挡住了它吗？

网址是www.oakland-rotary.org我指的是网站右上角以“您被邀请参加主要事件...”开头的紫色垂直 block 。应该被超链接的文本是“点击这里获取信息和门票”

这是整个区 block 区域的 HTML 代码:

            <div id="leftcall" style="float:left;width:800px;">
            </div>
            <div id="rightcallout">

            <div style="margin-left:auto;margin-right:auto;padding-bottom:10px;"><img src="/images/smallrotarylogo.png"></div>
            YOU ARE INVITED TO<br>
            <span style="font-size:34px;color:#f3d825;">THE MAIN EVENT</span><br>
            <br>
            <span style="font-family:arial;font-size:12px;">[ OUR ANNUAL FUNDRAISER ]</span><br>
            <span style="font-size:28px;color:#f3d825;">A MARDI GRAS PAR-TAY</span><br>
            AT ROCKWELL WINERY<br>
            IN ALAMEDA, CA<br>
            <br>
            <span style="font-family:arial;font-size:14px">March 1 from 6pm-10pm</span><BR>
            <BR>
            <span style="font-family:arial;font-size:14px;">
            <a href="http://www.eventbrite.com/e/a-mardi-gras-par-tay-oakland-rotary-3-rockwall-winery-march-1-2014-tickets-5268578460" target="_blank">CLICK HERE FOR INFO & TICKETS</a>
            </span>
            <br>                
            </div>
            </div>
        </div>
    </div>

这是该区域的 CSS:

#rightcallout {
float:right;
display:block;
z-index:9999;
height:100%;
width:200px;
padding:25px;
color:#fff;
font-family:League Gothic;
font-size:24px;
text-align:center;
background: #552baa; /* Old browsers */
background: -moz-linear-gradient(top,  #552baa 0%, #5c2cb4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#552baa), color-stop(100%,#5c2cb4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #552baa 0%,#5c2cb4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#552baa', endColorstr='#5c2cb4',GradientType=0 ); /* IE6-9 */
border-left:1px dashed #fff;
}

任何帮助将不胜感激!非常感谢!!!

Answer 1

此时 #rightcallout 高度大于可用空间。我已将字体大小更改为自动...并且内容适合。

#rightcallout {
float:right;
display:block;
z-index:9999;
height:100%;
width:200px;
padding:25px;
color:#fff;
font-family:League Gothic;
font-size:auto;  /* <<<-------- Modified*/
text-align:center;
background: #552baa; /* Old browsers */
background: -moz-linear-gradient(top,  #552baa 0%, #5c2cb4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#552baa), color-stop(100%,#5c2cb4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #552baa 0%,#5c2cb4 100%); /* IE10+ */
background: linear-gradient(to bottom,  #552baa 0%,#5c2cb4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#552baa', endColorstr='#5c2cb4',GradientType=0 ); /* IE6-9 */
border-left:1px dashed #fff;
}

我为该链接做了这个:

<span style="font-family:arial;font-size:14px;position: relative;z-index: 9999;">
<a href="http://www.eventbrite.com/e/a-mardi-gras-par-tay-oakland-rotary-3-rockwall-winery-march-1-2014-tickets-5268578460" target="_blank">CLICK HERE FOR INFO &amp; TICKETS</a></span>

我已经在 Chrome 中测试过并且工作正常......希望这对你有帮助。