字間(letter-spacing)で広げた最後の文字の後の空白をなくしたい

Question

緑色の「空室情報」の文字を左右中央に表示させたいです。

グローバルナビの字間を広げたところ、a要素の最後の文字の後にも無駄に広がってるために、
要素が広がってしまい、左右中央できてるのに見た目は中央にいってない状況です。

対処として、

  letter-spacing: 1rem;
  margin-right: -1rem;

を記述したところ、デベロッパーツールでは取り消し線はついていないものの、最後の要素は残っており
結果は変りません。

どうしたらいいものか解決策がここ数日まったく分からず、、お知恵を頂けますと幸いです。
コード詳細は以下の通りです。

        <nav class="navbar-collapse collapse" id="navigation" role="navigation">
          <div class="navbar-header">
              <a href="http://localhost:8080/wphome01/" class="navbar-brand"><img src="http://localhost:8080/wphome01/wp-content/themes/onsen/images/onsen_minilogo03.png" class="glnav_logo" alt="LOGO" width="150px"></a>
          </div><!-- /.navbar-header -->
          <ul id="menu-mainnavi" class="nav navbar-nav"><li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a href="http://localhost:8080/wphome01/onsen">温 泉</a></li>
            <li id="menu-item-27" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-27"><a title="room" href="http://localhost:8080/wphome01/room">客 室</a></li>
            <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost:8080/wphome01/rest">料 理</a></li>
            <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26"><a href="http://localhost:8080/wphome01/kanko">山と温泉</a></li>
            <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8080/wphome01/access">アクセス</a></li>
            <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href="http://localhost:8080/wphome01/contact">お問い合わせ</a></li>
            <li id="menu-item-89" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-89"><a href="http://localhost:8080/wphome01/reserve">空室確認</a></li>
        </ul>       
      </nav>

/* ------------------------------------------------- *
 *        Globalnavi
 * ------------------------------------------------- */
 .yamanokawa { text-indent: -9999px; }
 .navbar {
  margin-bottom: 0rem!important;
}
#menu-mainnavi {
  list-style: none;
  height: 50px;
}
#menu-mainnavi a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: #000;
  /*  vertical-align: -1px;*/
  font-family:  YuGothic, "Yu Gothic", 游ゴシック;
  font-weight: bold;
  letter-spacing: .3rem;
}
#menu-mainnavi a:hover {
  opacity: .6;
}
#menu-mainnavi img:hover {
  opacity: .6;
}
#navigation li {
  font-size: 17px;
  margin: 0 8px;
  display: inline-block;
}
#navigation li:last-child a {
  background-color: #6B8E23;
  border-radius: 2px;
  color: white;
  font-size: 14px;
  letter-spacing: 1rem;
  margin-right: -1rem;
  text-align: center;
}
#navigation li:last-child {
  text-align: center;
}

Answer 1

###解決法その１
text-alignを指定しない。

###解決法その２
text-indent:1rem;をつける。

Comments

[manmaru]

ご教示いただいた方法で左右中央配置ができました。
「text-indent:1rem;」、たしかにこれでずらすことができますね。
私の発想では到底思いつかないアイデアでした。
本当に、本当に、ありがとうございました。

Answer 2

aの領域を狭くしたいのであれば-1remは内包要素につけてください。

<a href="http://localhost:8080/wphome01/reserve"><div>空室確認</div></a>

/* ADD */
#navigation li:last-child a > div {
  margin-right: -1rem;
}
```**動くサンプル：**[https://jsfiddle.net/pu3ryw02/](https://jsfiddle.net/pu3ryw02/)

Comments

[manmaru]

早々にご返信くださりありがとうございます。
なるほどdivで包むのですね。
早速追記したいところなのですが、こちらのグローバルナビはワードプレスの固定ページより設定していてhtmlを記述していません。
おそらくどこかに〇〇.phpというファイルの中にhtml記述がのっているのでそのソースをいじればいいのですが、どこからいじれるかご存じでしょうか？？
ワードプレスで生成されたソースについてはcssで書き換えるという方法しか取っておらず分かりません。。

[kei344]

それであれば、提示されていない「ボタンの右側のパディング」の記述を変更されてはいかがでしょう。

[manmaru]

CSSに
letter-spacing: 1rem;
margin-right: -1rem;
と記載するという意味でしょうか？

それではあれば!importantも付けて書きましたが、デベロッパーツールでは取り消し線が引かれてしまい
反映しない状態です。
そもそもこのa要素にはパディングが存在しているから（要素自体が広がっている）でしょうか。。
（その考えだとmargin-rightもなんで効くのかという話になりますが。）

いずれにせよ残念ながら反映せず、結果は変らずでした。

[kei344]

違います。どこかでパディングが付与されているので、右パディングを消してみてはどうか、といっています。

[manmaru]

なるほど。
それであれば私も最初にそこを疑ったのですが、デベロッパーツールで見る限りパディングは付与されておりませんでした。
もう少し考えてみます。。