Question

问题

如果您运行我的代码，您会发现我的radio labels与我的radio input不对齐，我不确定为什么我将radio input放入{ {1}}标记。我还尝试从label row删除radio input类，但这不起作用。

如果有人能告诉我如何将label与其radio input对齐，那就太棒了！

代码

HTML

label

CSS

<label class="row">
            <input type="radio" name="priority" value="priority-high" checked="checked">
            <h2 class="priority-high">High</h2> </label>
        <label class="row">
            <input type="radio" name="priority" value="priority-medium">
            <h2 class="priority-medium">Medium</h2> </label>
        <label class="row">
            <input type="radio" name="priority" value="priority-low">
            <h2 class="priority-low">Low</h2> </label>

段

/*Add task styling*/

input[name="title"] {
    width: 70%;
    font-size: 2em;
}

select[name="course"],
input[name="due-date"] {
    font-size: 1.5em;
}

input[name="note"] {
    font-size: 1.15em;
    width: 100%;
}

input[name="due-date"] {
    width: 130px;
}

.error {
    color: #d11141;
}


/*Task styling*/

.task {
    padding-left: 3%;
    padding-right: 3%;
}

.task-title {
    padding-top: 2.5%;
}

.checkbox,
button[type="submit"] {
    font-size: 1.5em;
    padding-right: 1.5%;
}

.checkbox {
    background-color: #fafafb;
}

.task-info {
    float: right;
}

.task-info h2 {
    display: inline;
}

.task-info input[name="priority"] {
    vertical-align: top;
}

.task-info input[name="due-date"] {
    margin-bottom: 10px;
}

.due-date {
    font-weight: 300;
    font-style: italic;
}

.priority {
    font-size: 1.1em;
    padding-top: 5%;
    padding-bottom: 5%;
}

.priority-high {
    color: #d11141;
}

.priority-medium {
    color: #ffc425;
}

.priority-low {
    color: #00aedb;
}

.task-details {
    padding-top: 1%;
    padding-left: 4.5%;
    padding-bottom: 2.5%;
}

.task-date {
    padding-right: 10px;
}

.note {
    padding-top: 1%;
    font-weight: 300;
    font-style: italic;
}

@import url('https://fonts.googleapis.com/css?family=Roboto:300i,400,400i');

/*General styling*/

body {
    font-family: 'Roboto', sans-serif;
    background-color: #efefef;
    color: #333333;
    margin: 0 3% 0 3%;
    font-size: 100%;
    font-weight: 400;
    display: block;
}

.row {
    display: block;
}

.col {
    display: inline-block;
}

.search,
.task {
    background-color: #fafafb;
}

div.element:first-child {
    margin-top: 10px;
}

.element {
    margin-bottom: 10px;
}


/*Remove auto styling*/

button {
    border: none;
    background-color: #fafafb;
    color: #333333;
    padding: 0;
}

button:focus,
input:focus,
select:focus {
    outline: 0;
}

h1,
h2,
h3,
p {
    margin: 0;
}


/*General form  styling*/

input[type="text"],
select[name="course"],
input[name="due-date"] {
    background-color: #fafafb;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    color: #333333;
    border: none;
}

input[type="submit"],
button {
    cursor: pointer;
}

input[type="text"]::-webkit-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #949496;
}

input[type="text"]:-ms-input-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #949496;
}

input[type="text"]:-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #949496;
}

input[type="text"]::-moz-placeholder {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    font-style: italic;
    color: #949496;
}

input[type="text"][name="note"]::-webkit-input-placeholder {
    font-weight: 300;
}

input[type="text"][name="note"]:-ms-input-placeholder {
    font-weight: 300;
}

input[type="text"][name="note"]:-moz-placeholder {
    font-weight: 300;
}

input[type="text"][name="note"]::-moz-placeholder {
    font-weight: 300;
}

input[type="text"][name="due-date"]::-webkit-input-placeholder {
    font-weight: 300;
}

input[type="text"][name="due-date"]:-ms-input-placeholder {
    font-weight: 300;
}

input[type="text"][name="due-date"]:-moz-placeholder {
    font-weight: 300;
}

input[type="text"][name="due-date"]::-moz-placeholder {
    font-weight: 300;
}

button[type="submit"] {
    font-size: 1.7em;
}


/*Search bar styling*/

.search {
    padding: 15px 15px 15px 15px;
}

.search-header {
    padding-bottom: 10px;
}

#search,
#show-all {
    margin-right: 10px;
}

#search {
    font-size: 2.5em;
    vertical-align: middle;
}

#show-all {
    font-size: 2em;
}

input[name="search"] {
    width: 80%;
    font-size: 2em;
    height: 50px;
}

.search-header button[type="button"] {
    float: right;
}

.search-header #arrow {
    font-size: 3em;
}

.search-details {
    margin-left: 4%;
}

.search-details h2 {
    display: inline;
}

.search-details .priority,
.search-details input[name="note"] {
    margin-left: 7px;
}

.search-details input[name="note"] {
    width: 85%;
}

.search-details .priority {
    padding-top: 0;
    padding-bottom: 0;
}

.search-details label {
    padding-bottom: 10px;
}


/*Add task styling*/

input[name="title"] {
    width: 70%;
    font-size: 2em;
}

select[name="course"],
input[name="due-date"] {
    font-size: 1.5em;
}

input[name="note"] {
    font-size: 1.15em;
    width: 100%;
}

input[name="due-date"] {
    width: 130px;
}

.error {
    color: #d11141;
}


/*Task styling*/

.task {
    padding-left: 3%;
    padding-right: 3%;
}

.task-title {
    padding-top: 2.5%;
}

.checkbox,
button[type="submit"] {
    font-size: 1.5em;
    padding-right: 1.5%;
}

.checkbox {
    background-color: #fafafb;
}

.task-info {
    float: right;
}

.task-info h2 {
    display: inline;
}

.task-info input[name="priority"] {
    vertical-align: top;
}

.task-info input[name="due-date"] {
    margin-bottom: 10px;
}

.due-date {
    font-weight: 300;
    font-style: italic;
}

.priority {
    font-size: 1.1em;
    padding-top: 5%;
    padding-bottom: 5%;
}

.priority-high {
    color: #d11141;
}

.priority-medium {
    color: #ffc425;
}

.priority-low {
    color: #00aedb;
}

.task-details {
    padding-top: 1%;
    padding-left: 4.5%;
    padding-bottom: 2.5%;
}

.task-date {
    padding-right: 10px;
}

.note {
    padding-top: 1%;
    font-weight: 300;
    font-style: italic;
}

Answer 1

h1到h6是块级元素，它跨越整个行的宽度。您可以将它们更改为内嵌css，如下所示：

h2 {
    display: inline;
}

希望它有所帮助！

Answer 2

请改为尝试：

<div class="row">

  <input type="radio" name="priority" value="priority-high" checked="checked" style="display: inline-block;">
  <h2 class="priority-high" style="display: inline-block;">High</h2> 
</div>

Answer 3

将标题元素放在表单标签中是不好的做法。如果您需要使用CSS等较大字体大小的视觉效果。

尝试将标题元素替换为span，这是一个内联元素。

<lable>
  <span>Label</span>
  <input type="radio" name="priority" value="priority-high" checked="checked">
</label>

为了您自己的利益，请避免使用内联样式。

单选按钮标签不在标签旁边 - 如何修复？

问题

代码

HTML

CSS

段

3 个答案: