Разрыв и перерыв линии div

Question

Это действительно сложно объяснить, в чем проблема, но если вы посмотрите на JSFiddle, я создал вещи, которые будут намного более чистыми.

Во-первых, вы заметите, что высота линии строк не равны, даже если высота должна быть установлена ​​на 33%, таким образом, все должно быть одинаково высоким .. Это, к сожалению, не так ..

И, во-вторых, есть более длинная ссылка, которая должна быть обернута внутри собственной кнопки, в тот момент, когда тип кнопки отключается наполовину, создавая сломанный вид.

Снова было очень сложно назвать этот пост в связи с моей конкретной проблемой. Взгляд на JSFiddle сделает вещи более ясными.

//Ignore this comment 

Answer 1

Я обновил ваш код и изменил ваш 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; 

JSFiddle Updated Source

Answer 2

Это из-за максимальной процентной ширины, которая определяется, кнопки будут сокращены в два раза, где белое пространство найдено. Чтобы обойти эту проблему, добавьте следующую строку в ваш код:

#specialist-area-nav a{ 
    white-space: nowrap; 
} 

Это позволит предотвратить разрывы ваших кнопок, и будет держать их в ту же высоту.

JSFiddle

Answer 3

Добавление #specialist-area-nav a{ display:inline-block; } будет решить некоторые проблемы, но вам все равно придется еще немного Tunning сделать.