問題が何であるかを説明するのは非常に困難ですが、私が作成したJSFiddleを見ると、物事がより明確になります。
最初に、高さを 33% に設定する必要があるにもかかわらず、行の行の高さが等しくないことに気付くでしょう。したがって、すべてが等しく高くなるはずです..残念ながらそうではありません..
2 つ目は、それ自体のボタン内にラップする必要がある長いリンクがあり、その時点でボタンが途中で切り取られて壊れた外観になっています。
繰り返しますが、私の問題に関してこの投稿に名前を付けるのは本当に困難でした. JSFiddle を見ると、物事がより明確になります。
//Ignore this comment
定義されている最大パーセンテージ幅のため、空白が見つかった場所でボタンが半分にカットされます。これを回避するには、コードに次を追加します。
#specialist-area-nav a{
white-space: nowrap;
}
これにより、ボタンの破損を防ぎ、ボタンの高さを同じに保つことができます。
コードを更新し、css を変更しました。
Add float:left to #specialist-area-nav,#specialist-area-nav a,#specialist-area-nav .row, #specialist-area-nav .col;
Ad margin-top:1% to #specialist-area-nav .row;
Change #specialist-area-nav a padding to 5px;
Add margin-left:1% to #specialist-area-nav .col;
Change #specialist-area-nav .row height to 32%;
Add white-space: nowrap to #specialist-area-nav a;
追加#specialist-area-nav a{ display:inline-block; }することでいくつかの問題は解決しますが、さらに調整する必要があります。