Другие вопросы выравнивания CSS

Я пытаюсь выровнять <H2> с помощью кнопки на той же линии. <H2> имеет нижнюю границу, и я хотел бы, чтобы кнопка была чуть выше линии.Другие вопросы выравнивания CSS

Я попытался добавить к нижнему краю и/или дополнению, но это перемещает вещи вниз.

Я прикрепляю визуализированный HTML и снимок экрана некоторых проверок в Chrome. Если есть какая-либо другая информация, которая может быть полезна, сообщите мне.

.button-xs-med { 
 
    display:inline-block; 
 
    width:95px; 
 
    height:25px; 
 
    cursor:pointer; 
 
    font-size:13px; 
 
    line-height:1; 
 
    color:#fff; 
 
    text-align:center; 
 
    background:url('/content/images/workflow-wizard-button-xs-med.png') no-repeat; 
 
} 
 

 
.button-xs-med .button-text { 
 
    display:inline-block; 
 
    width:95px; 
 
    height:12px; 
 
    margin:4px 5px 0px 0px; 
 
    font-family:'Open Sans Condensed',sans-serif; 
 
    color:#fff; 
 
}

<div id="pnlResourceSnapshotList" data-source-href="http://localhost:63595/profiles/yada/652"> 
 
    <div> 
 
    <h2 style="margin: 0 15px; border-bottom: 1px solid #dadada;"> 
 
     Current Resources 
 
     <a onclick="AjaxAction('/home/setcollapse', 'POST');" class="button-xs-med" role="button" data-toggle="collapse" href=".collapse" aria-expanded="false" aria-controls="contentDetails" style="float: right;"> 
 
     <span class="button-text"> 
 
      Details 
 
     </span> 
 
     </a> 
 
    </h2> 
 
    </div> 
 
    <div style="margin: 0 15px;"> 
 
    <div style="display: inline-block; width: 100%; padding:5px 0px;border-bottom:1px solid #dadada;"> 
 
     <div style="padding: 0;"> 
 
     Text 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style="margin: 0 15px; "> 
 
    <div style="display: inline-block; width: 100%; padding:5px 0px;border-bottom:1px solid #dadada;"> 
 
     <div style="padding: 0;"> 
 
     Text 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

источник

2016-02-24 M Kenyon II

Похоже, что ваша кнопка выше h2. Вы можете сделать высоту линии h2 такой же, как высота кнопки, или добавить верхнее дополнение к h2. Другим решением было бы сделать относительное положение h2 и кнопку абсолютной, чем управлять кнопкой, например: 'right: 0; bottom: 0; '. – skobaljic

Это выглядит лучше, но я не уверен, как вы его изменили. –

Есть ли другой способ, чтобы кнопка была выровнена вправо в div/h2 без 'float'? –

Без CSS для вашей кнопки это будет немного догадки. Мне кажется, что ваша кнопка слишком велика для линии. Высота линии задается не-встроенными и неплавкими элементами (оба из которых - ваш якорь). Чтобы исправить это, увеличьте размер шрифта h2, увеличьте высоту линии h2 или отрегулируйте стиль анкера, чтобы он не был плавающим или встроенным.

Вы можете сделать это с некоторым относительным положением (с отрицательным верхом), но вам придется немного похудеть и решить, что вам больше нравится.

источник

2016-02-24 16:14:31 OffTheBricks

Как было предложено @skobaljic, вы можете использовать absolute позиционирование ... однако элемент <h2> должен быть установлен в relative. Используя этот метод, не будет необходимости использовать float.

/* Adjust your css */ 
h2 { 
    position: relative; 
} 

.button-xs-med { 
    position: absolute; 
    right: 0; 
    top: 0; 
}

Затем настройте ваш HTML - обратите внимание, что style="float: right;" был удален из тега привязки.

<h2 style="margin: 0px 15px; border-bottom: 1px solid rgb(218, 218, 218); position: relative;"> 
     Current Resources 
     <a style="" aria-controls="contentDetails" aria-expanded="false" href=".collapse" data-toggle="collapse" role="button" class="button-xs-med" onclick="AjaxAction('/home/setcollapse', 'POST');"> 
     <span class="button-text"> 
      Details 
     </span> 
     </a> 
</h2>

источник

2016-02-25 00:50:51 cyrotello

Другие вопросы выравнивания CSS

ответ

Смежные вопросы