CSS нужен встроенный элемент для отображения рядом с {display: block; } элемент - PullRequest
Новая
       9

CSS нужен встроенный элемент для отображения рядом с {display: block; } элемент

1 голос
/ 13 ноября 2009

Я пытаюсь установить флажок рядом с другим элементом. Проблема в том, что элемент a сделан CSS "блоком", поэтому он отображается на правильной высоте и ширине. Будучи блоком, я не могу просто поместить другой элемент рядом с ним и надеяться, что он появится там - он появится чуть ниже него.

Автономный образец показан ниже. 

<html>
<head>
<style type='text/css'>
/* I don't have control over this */
a.btn {
        background-color: #B35905;
        color: #E6D389;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
        display: block;
        border: none;
        cursor: pointer;
}
.normal{
    line-height: 20px;
    font-size: 12px;
    height: 20px;
    width: 125px;
    padding: 0px;
    margin: 0px;
}
</style>
</head>
<body>

<!-- I have some control over this -->
<a class="btn normal">Push Me</a><input type="checkbox">
<br>
<a class="btn normal">Push Me Too</a>
</body>
</html>

Итак, я ищу флажок, который появляется сразу справа от элемента, но без необходимости полностью портить стилизацию кнопки. Абсолютное позиционирование флажка с использованием (известного) размера кнопки кажется неправильным и грязным.

Предложения

Ответы [ 6 ]

1 голос
/ 13 ноября 2009 
<a class="btn normal" style="float: left;">Push Me</a><input type="checkbox">
<br style="clear: both;">
<a class="btn normal">Push Me Too</a>
1 голос
/ 13 ноября 2009

Добавьте еще два класса CSS 

.floatingButton{
    float:left;
}
.aCheckbox {
    xclear:left;
}

Тогда 

<a class="btn normal floatingButton">Push Me</a><input class="aCheckbox" type="checkbox">
        <br>
        <a class="btn normal">Push Me Too</a>

Должен сделать трюк

1 голос
/ 13 ноября 2009

Если вы должны оставить привязку блочным элементом, установите для него float: left. Не забудьте добавить 

<div style="clear: both;"></div>

после флажка.

0 голосов
/ 13 ноября 2009

Просто примените float: left к первой метке a.

0 голосов
/ 13 ноября 2009

Можете ли вы сделать что-то подобное с имеющимся у вас доступом? 

<div style="width: 150px;">
  <input type="checkbox" style="float: right;"> 
  <a class="btn normal">Push Me</a>
</div>
0 голосов
/ 13 ноября 2009

Самый простой способ установить флажок рядом с кнопкой при сохранении стиля блока кнопки - установить для свойства display кнопки значение inline-block. Удивительно, но использование display: inline-block в этом сценарии будет работать во всех современных браузерах и IE 6 и выше. inline-block - малоизвестное, но очень полезное свойство.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...