HTML & CSS: создайте флажок без использования флажка

Question

вот код (и, да, я использую базовый сброс.css):

.checkbox { border: 1px solid black; width: 10px; height: 10px; }

<ul>
    <li>
        <p><div class="checkbox"></div>I will!</p>
    </li>
    <li>
        <p><div class="checkbox"></div>I won't!</p>
    </li>
</ul>

ты видишь, что я пытаюсь сделать. по сути, создать флажок. причина, по которой я НЕ использую тэг checkbox, заключается в том, что мне нужно экспортировать эту вещь в PDF, чтобы ее можно было распечатать, а боготелые кулаки могли перетащить свою метку X через поле. если я использую тэг checkbox, он слишком маленький. если я использую и изображение, PDF не выравнивается правильно.

так. Мне нужно окно CSS, чтобы выстроиться, как ожидалось. что мне не хватает? я пытался изменить div на display: inline;, но он исчезает! inline-block бесполезно.

Я пытался как сумасшедший, чтобы найти это, но безрезультатно, поэтому, если это обнаружилось где-то еще, извинения.

WR!

Answer 1

.checkbox { 
    border: 1px solid black; 
    width: .65em; 
    height: .65em; 
    display: inline-block;
    margin-right: 4px;
}

Посмотрите, как это работает здесь: http://jsfiddle.net/ZeaLM/

Answer 2

1) Избавьтесь от <p> элементов

2) Добавьте float: left к вашему .checkbox стилю

3) Добавьте   после div илиpadding: right в блок div, чтобы он выглядел лучше

4) Добавьте li { list-style-type: none; } в свой блок стилей

5) Поиграйте с vertical-align в своем стиле .checkboxпока ты не будешь счастлив

Answer 3

Просто чтобы убедиться - вы поместили селектор .checkbox внутри тега <style> в реальном HTML?

<style type="text/css">
    .checkbox { border: 1px solid black; width: 10px; height: 10px; }
</style>

Answer 4

Есть много способов сделать это, один из которых это

Answer 5

<div> не допускается внутри элементов <p> (что не допускает никаких элементов уровня блока внутри него).

См. Этот пример

В этом примере я использовал display: inline-block; и изменил элемент <p> на <div>.

Answer 6

Ваш браузер может быть привередлив в отношении пустых элементов. Попробуйте добавить   в <div>.

Answer 7

inline-block - это display, необходимое для этого.