申し訳ありません - これはおそらく本当にシンプルですが、今は私をちょっと運転しています。私のサイトリンクのフッタは新しい行にジャンプしているように見えるので、あなたをリンクに連れてこないでしょう。リンクはマウスのクリックでジャンプし続ける
これはラップトップとタブレットの横サイズのページです。モバイルフッターは正常に動作します。
私は親divに、親指を押し下げて相対的な位置を固定して固定することをやってみました。 Webで回答を検索しましたが、マウスクリックではなくマウスオーバーで問題が発生しているようです。私もすべてを自分の個人部門に入れてみました(最後に試してみました)。
私が表示してみてください、高度で 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
btw。、p a:ホバー、a:フォーカス、a:訪問済み、div.homebox a、a:フォーカス、 a:アクティブ、a:visitedはここで選択する要素を選択しません。 – CBroe
@CBroe - 「コメントを使用して詳細情報を求めたり、改善を提案する」コメントのプレースホルダテキストに記載されているように、コメント内の質問に回答することは避けてください。 –