链接继续跳鼠标单击

Question

抱歉 - 这可能非常简单，但它已经让我开了一段时间了。我的网站链接的页脚似乎跳转到一个新行，因此不会将您带到链接。

这是笔记本电脑和平板电脑的横向尺寸页面。移动页脚工作正常。

我试过给父div一个高度来阻止它向下推，使位置相对固定。我在网上搜索了答案，但人们似乎有鼠标悬停的问题，而不是点击鼠标。我也尝试将所有内容放入他们自己的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">
    &copy; copyright info</div>

  <div id="FooterLegalText">
    <div class="legalprivacy"><span><a href="#">Privacy Policy</a> &emsp; &#9679; &emsp; </span></div>
    <div class="legalcookie"><span><a href="#">Cookie Policy</a> &emsp; &#9679; &emsp; </span></div>
    <div class="legalshoptc"><span><a href="#">Shop T&Cs</a> &emsp; &#9679; &emsp; </span></div>
    <div class="legalaccessibility"><span><a href="#">Accessibility</a> &emsp; &#9679; &emsp; </span></div>
    <div class="legalsitemap"><span><a href="#">Sitemap</a></span></div>
  </div>

</div>

Answer 1

@CBroe，是对的，但要否定这种行为并提供一些解决方案尝试将这样的东西添加到你的页脚锚;

div.footerlink a {display: inline-block;}

JS Fiddle

此致 -B