對不起 - 這可能很簡單,但它一直在驅動我loopy一段時間。我網站鏈接的頁腳似乎跳到了新行,因此不會將您帶到鏈接。鏈接繼續跳躍點擊鼠標
這是筆記本電腦和平板電腦的風景大小頁面。移動頁腳工作正常。
我已經嘗試給父母div一個高度來阻止它推下來,使位置相對和固定。我在網上搜索了答案,但是人們似乎在鼠標懸停時發生了問題,而不是鼠標點擊。我也嘗試把所有的東西都放到他們自己的個人分區(最後一件事)。
我已經把所有的代碼到的jsfiddle查看和嘗試, jsfiddle
先進的感謝。
邁克
p a:hover,
a:focus,
a:visited {
color: #ffffff;
background: #333333;
white-space: nowrap;
}
a:active {
border: none !important;
display: block;
white-space: nowrap;
width: 20%;
}
div.homebox a:hover {
background: #999999;
white-space: nowrap;
}
div.homebox a,
a:focus,
a:active,
a:visited {
color: #73170E;
white-space: nowrap;
}
div.footerlink a:hover {
background: #999999;
white-space: nowrap;
}
div.footerlink a,
a:focus,
a:active,
a:visited {
color: #ff0000;
white-space: nowrap;
}
a img {
background: none;
}
#FooterContainer {
width: 100%;
background: #ccc;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#FooterContact {
display: inline-block;
float: left;
width: 45%;
margin-left: 30px;
}
#FooterLatest {
display: inline-block;
float: left;
margin: 5px;
width: 30%;
}
#FooterSocial {
display: inline-block;
float: left;
margin: 5px;
width: 15%;
text-align: center;
padding-bottom: 10px;
}
#social {
width: 60%;
margin-left: auto;
margin-right: auto;
}
#FooterLegal {
color: #ffffff;
width: 100%;
overflow: hidden;
background: #000000;
}
#FooterLegalText {
border: 1px solid yellow;
display: inline-block;
float: right;
width: 55%;
}
.legalprivacy {
border: 1px solid orange;
width: 15%;
top: 0;
position: relative;
display: inline-block;
}
.legalcookie {
border: 1px solid orange;
width: 20%;
position: relative;
display: inline-block;
}
.legalshoptc {
border: 1px solid orange;
width: 18%;
position: relative;
display: inline-block;
}
.legalaccessibility {
border: 1px solid orange;
width: 19%;
position: relative;
display: inline-block;
}
.legalsitemap {
border: 1px solid orange;
width: 9%;
position: relative;
display: inline-block;
}
.legaldot {
border: 1px solid orange;
width: 3%;
position: relative;
display: inline-block;
}
#FooterCopyright {
border: 1px solid white;
display: inline-block;
float: left;
font-size: 12px;
width: 35%;
}
.block_padding {
padding-top: 40px;
}
.connect_fb {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
.connect_fb:hover .img-top {
display: inline;
}
.connect_fb .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.connect_tweet {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
.connect_tweet:hover .img-top {
display: inline;
}
.connect_tweet .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.connect_instagram {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
.connect_instagram:hover .img-top {
display: inline;
}
.connect_instagram .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.connect_pinterest {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
.connect_pinterest:hover .img-top {
display: inline;
}
.connect_pinterest .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.connect_gplus {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
.connect_gplus:hover .img-top {
display: inline;
}
.connect_gplus .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
.connect_rss {
width: 32px;
height: 32px;
position: relative;
display: inline-block;
}
.connect_rss:hover .img-top {
display: inline;
}
.connect_rss .img-top {
display: none;
position: absolute;
top: 0;
left: 0;
z-index: 99;
}
#justgive {
margin-left: auto;
margin-right: auto;
padding-top: 10px;
}
#translate {
padding-top: 10px;
}
.contacttable {
display: table;
text-align: left;
width: 90%;
padding: 0px 0px 3px 0px;
}
.contactrow {
display: table-row;
}
.contactcell {
display: table-cell;
padding: 3px 0px;
font-size: 0.9em;
}
.contactcellicon {
display: table-cell;
width: 5%;
padding: 3px 10px;
}
.contactbody {
display: table-row-group;
}
<div id="FooterContainer">
<div id="FooterContact">
<h4><u>Contact Us</u></h4>
<div id="contdetails">
<div class="contacttable">
<div class="contactbody">
<div class="contactrow">
<div class="contactcellicon"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
<div class="contactcell">Address Here</div>
</div>
<div class="contactrow">
<div class="contactellicon"><i class="fa fa-phone" aria-hidden="true"></i></div>
<div class="contactcell">phone</div>
</div>
<div class="contactrow">
<div class="contactcellicon"><i class="fa fa-at" aria-hidden="true"></i></div>
<div class="contactcell"><a href="mailto:#">email</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="FooterLatest">
<h4><u>Latest Product News</u></h4>
<ul class="posts">
<?php query_posts('cat=1,3&posts_per_page=4'); while (have_posts()) : the_post(); ?>
<?php $post_date = get_the_date('j M Y'); echo $post_date; ?>
<ul style="list-style: none;">
<li><a href='<?php the_permalink() ?>'><b><?php the_title(); ?></b></a></li>
</ul><br>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>
<div id="FooterSocial">
<div id="social">
<div class="connect_fb">
<a href="#" target="_blank">
<img src="#" />
<img src="#" class="img-top" />
</a>
</div>
<div class="connect_tweet">
<a href="#" target="_blank">
<img src="#" />
<img src="#" class="img-top" />
</a>
</div>
<div class="connect_instagram">
<a href="#" target="_blank">
<img src="#" />
<img src="#" class="img-top" />
</a>
</div>
<div class="connect_pinterest">
<a href="#" target="_blank">
<img src="#" />
<img src="#" class="img-top" />
</a>
</div>
<div class="connect_gplus">
<a href="#" target="_blank">
<img src="#" />
<img src="#" class="img-top" />
</a>
</div>
<div class="connect_rss">
<a href="#">
<img src="#" />
<img src="#" class="img-top" />
</a>
</div>
</div>
<div id="justgive">
<a href="#" target="_blank"><img src="#" alt="Fundraise On JustGiving"></a>
</div>
</div>
</div>
<div id="FooterLegal">
<div id="FooterCopyright" class="footerlink">
© copyright info</div>
<div id="FooterLegalText">
<div class="legalprivacy"><span><a href="#">Privacy Policy</a>   ●   </span></div>
<div class="legalcookie"><span><a href="#">Cookie Policy</a>   ●   </span></div>
<div class="legalshoptc"><span><a href="#">Shop T&Cs</a>   ●   </span></div>
<div class="legalaccessibility"><span><a href="#">Accessibility</a>   ●   </span></div>
<div class="legalsitemap"><span><a href="#">Sitemap</a></span></div>
</div>
</div>
你從根本上改變了鏈接的佈局屬性爲':active'狀態只(顯示:塊,空白:NOWRAP甚至一個明確指定的寬度) - 當然這將使它在進入該狀態時「跳躍」。 – CBroe
順便說一下,'p a:hover,a:focus,a:visited'和'div.homebox a,a:focus, a:active,a:visited'可能不會選擇您想要在此選擇的元素。 – CBroe
@CBroe - 正如評論「使用評論以徵求更多信息或提出改進意見時佔位符文本中所述」,避免在評論中回答問題。 –