1

現在、UL メニューを作成していますが、いくつか問題があります。LI のテキストを下に移動しようとすると、div が大きくなります。

HTML コード:

<ul class="accordion"> 
        <li class="files">
                <a href="#one">Dashboard<span>0</span></a>
        </li>
</ul>

CSS コード:

.accordion li > a {
        display: block;
        position: relative;
        min-width: 110px;
        padding: 0 20px 0 50px;
        height: 50px !important;
        color: #C8C8C8;
        font: bold 12px/32px Arial, sans-serif;
        text-decoration: none;
}

したがって、パディングをこれに変更するたびに：

パディング: 5px 20px 0 50px;

div の高さを 50px にする必要があるのに、55px にします。誰かがこれで私を助けてくれることを願っています! ありがとうございました。

4

1 に答える 1

0

これがどのようにbox-sizing/paddingとline-height動作するかです。私の個人的な意見では、line-height が最良のオプションであり、計算がはるかに簡単です。

一緒に使用して、本当に素晴らしいコンボを作ることができます!

行の高さ/パディング CSS

.lH {
  width: 80px;
  height: 50px;
  text-align: center;
  display: block;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  background: #ff7200;
  line-height: 50px;
  margin-bottom: 50px;
}

ボックスのサイズ変更 CSS

.bS {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 80px;
  height: 50px;
  text-align: center;
  display: block;
  border-radius: 5px;
  border: 2px solid rgba(0, 0, 0, 0.4);
  background: mediumSeaGreen;
  padding: 12px 0;
}

JSFIDDLE

于 2013-11-05T16:17:54.353 に答える