Question

我使用this instruction创建了一个带有JavaScript和CSS的按钮，看起来像Wordpress.com页面上的“订阅”按钮。但是，我只使用文字而不是订阅按钮。

我正在寻找修改CSS代码的支持：

 <?php wp_footer(); ?>
<style type="text/css" media="screen">
 #bit, #bit * {}
 #bit {
      bottom: -300px;
      font: 13px Helvetica,sans-serif;
      position: fixed;
      right: 10px;
      z-index: 999999;
      width: 230px;
  }
#bit a.bsub {
      background-color: #464646;
      background-image: -moz-linear-gradient(center bottom , #3F3F3F, #464646 5px);
      background: -webkit-gradient(linear, left top, left bottom, from(#3F3F3F), to(#464646));
      filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#3F3F3F', endColorstr='#464646');

      border: 0 none;
      box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);
      color: #CCCCCC;
      display: block;
      float: right;
      font: 13px/28px Helvetica,sans-serif;
      letter-spacing: normal;
      outline-style: none;
      outline-width: 0;
      overflow: hidden;
      padding: 0 10px 0 8px;
      text-decoration: none !important;
      text-shadow: 0 -1px 0 #444444;
  }
#bit a.bsub {
      border-radius: 2px 2px 0 0;
  }
#bit a.bsub span {
      background-attachment: scroll;
      background-clip: border-box;
      background-color: transparent;
      background-image: url("http://sacriba.bplaced.net/wordpress/wp-content/uploads/2014/07/Favicon_small.png");
      background-origin: padding-box;
      background-position: 2px 3px;
      background-repeat: no-repeat;
      background-size: 30% auto;
      padding-left: 18px;
  }
#bit a:hover span, #bit a.bsub.open span {
      /*background-position: 0 -117px;*/
      color: #FFFFFF !important;
  }
#bit a.bsub.open {
      background: none repeat scroll 0 0 #333333;
  }
#bitsubscribe {
      background: none repeat scroll 0 0 #464646;
      border-radius: 2px 0 0 0;
      color: #FFFFFF;
      margin-top: 27px;
      padding: 15px;
      width: 200px;
      float: right;
      margin-top: 0;
  }

div#bitsubscribe.open {
      box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
  }

  #bitsubscribe div {
      overflow: hidden;
  }

  #bit h3, #bit #bitsubscribe h3 {
      color: #fff;
      font-family: Helvetica,Arial,sans-serif;
      font-size: 20px;
      font-weight: 300;
      margin: 0 0 0.5em !important;
      text-align: center;
      text-shadow: 0 1px 0 #333333;
  }

#bit #bitsubscribe p {
      font: 300 15px/1.3em Helvetica,Arial,sans-serif;
      margin: 0 0 1em;
      text-shadow: 0 1px 0 #333333;
  }

  #bitsubscribe p a {
      margin: 20px 0 0;
      color: #FF7A3D;
      display: block;
  }

  #bit #bitsubscribe p.bit-follow-count {
      font-size: 13px;
  }
#bitsubscribe.open {
      display: block;
  }
#bitsubscribe #bsub-credit {
      border-top: 1px solid #3C3C3C;
      font: 11px Helvetica,sans-serif;
      margin: 0 0 -15px;
      padding: 7px 0;
      text-align: center;
  }
#bitsubscribe #bsub-credit a {
      background: none repeat scroll 0 0 transparent;
      color: #AAAAAA;
      text-decoration: none;
      text-shadow: 0 1px 0 #262626;
  }
#bitsubscribe #bsub-credit a:hover {
      background: none repeat scroll 0 0 transparent;
      color: #FFFFFF;
  }
</style>
<script type="text/javascript" charset="utf-8">
  jQuery.extend(jQuery.easing, {
      easeOutCubic: function (x, t, b, c, d) {
          return c * ((t = t / d - 1) * t * t + 1) + b;
      }
  });
  jQuery(document).ready(function () {
      var isopen = false,
          bitHeight = jQuery('#bitsubscribe').height();
      setTimeout(function () {
          jQuery('#bit').animate({
              bottom: '-' + bitHeight - 30 + 'px'
          }, 200);
      }, 300);
      jQuery('#bit a.bsub').click(function () {
          if (!isopen) {
              isopen = true;
              jQuery('#bit a.bsub').addClass('open');
              jQuery('#bit #bitsubscribe').addClass('open')
              jQuery('#bit').stop();
              jQuery('#bit').animate({
                  bottom: '0px'
              }, {
                  duration: 400,
                  easing: "easeOutCubic"
              });
          } else {
              isopen = false;
              jQuery('#bit').stop();
              jQuery('#bit').animate({
                  bottom: '-' + bitHeight - 30 + 'px'
              }, 200, function () {
                  jQuery('#bit a.bsub').removeClass('open');
                  jQuery('#bit #bitsubscribe').removeClass('open');
              });
          }
      });
  });
</script>
<div id="bit" class="">
<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Scroll</span></a>
<div id="bitsubscribe">
<p><a href="#">Raufscrollen</a></p>
<p><a href="#showcategorylist">Zur Artikelliste</a></p>
</div>
</div>
</body>
</html>

文字看起来像这样（右下角）： sacriba.bplaced.net

为什么橙色文字对齐？我怀疑边距或填充的一些值是原因，但我无法识别它们。
如何将文本更改为居中对齐（在灰色区域内）？
为了我的目的，CSS似乎相当臃肿。是否有任何不再需要的选择器？

请在回答之前提及问题编号，以便更有效地阅读。

Answer 1

回答你的1和2： a标签应该包含属性display：block以及text-align：center。
答案3：根据自己的喜好调整#bitsubscriber p a 边距，以控制文字显示的大小。

修改WordPress.com的CSS订阅按钮，用于自托管的Wordpress网站

1 个答案: