Question

我正在努力搞复选框。我希望将它们显示在彼此相邻的一行上。这是我的JSFiddle。

HTML

<form style="height:1200px;"role="form" method="post" action="../process.php">
    <label>Your Name*</label>
    <input name="name" placeholder="">

    <label>Email Address*</label>
    <input name="email" type="email" placeholder="">
        Your approximately budget for website
    <input name="budget" placeholder="">
    <fieldset>
        <legend>What is Your Favorite Pet?</legend>

        <input type="checkbox" name="animal" value="Cat" /><p style=" margin-right:200px;">Cats </p><br />
        <input type="checkbox" name="animal" value="Dog" />Dogs<br />
        <input type="checkbox" name="animal" value="Bird" />Birds<br />
        <input type="submit" value="Submit now" />
    </fieldset>     
    <input id="submit" name="submit" type="submit" value="Send">
</form>

CSS

form {
    margin-left:auto;
    margin-right:auto;
    width: 343px;
    height: 333px;
    padding:30px;
    border: 1px solid rgba(0,0,0,.2);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background: linear-gradient(top,rgba(255, 255, 255, 0.1) 30%,rgba(0,0,0,.3) 60%);
    box-shadow: 0 0 13px 3px rgba(0,0,0,.5);
    overflow: hidden; 
}

textarea{
      background: rgba(180, 180, 180, 0.3) url(http://estudio87.com/img/gemicon_message.png) no-repeat scroll 16px 16px; 
    width: 276px;
    height: 110px;
    border: 1px solid rgba(255,255,255,.6);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
    color:#fff;
    padding-left:45px;
    padding-right:20px;
    padding-top:12px;
    margin-bottom:20px;
    overflow:hidden;
}

input {
    width: 276px;
    height: 48px;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box; 
    display:block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size:18px;
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    margin-bottom:20px;
}

input[type=submit] {
    cursor:pointer;
}

input.name {
    background: rgba(180, 180, 180, 0.3) url(http://estudio87.com/img/gemicon_name.png) no-repeat scroll 16px 16px; 
    padding-left:45px;
}

input.email {
    background: rgba(180, 180, 180, 0.3) url(http://estudio87.com/img/gemicon_email.png) no-repeat scroll 16px 20px;
    padding-left:45px;
}

input.message {
    background: rgba(255, 255, 255, 0.4) url(http://estudio87.com/img/gemicon_message.png) no-repeat scroll 16px 16px;
    padding-left:45px;
}

::-webkit-input-placeholder {
    color: #fff;
}

:-moz-placeholder{ 
    color: #fff; 
}

::-moz-placeholder {
    color: #fff;
}

:-ms-input-placeholder {  
    color: #fff; 
}

input:focus, textarea:focus { 
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 5px 1px rgba(255,255,255,.5);
    overflow: hidden;
}

Answer 1

根据您在每个复选框下面的代码，您有一个
标记，它阻止复选框元素显示在一行中，第二个将每个复选框及其标签包装到div中并添加它像自定义复选框这样的类，其样式如下：显示内联块，如下所示：

<div class="custom-checkbox">
 <input type="checkbox" name="animal" value="Cat" /><label>Checkbox 1</label>
</div>

希望这有帮助

Answer 2

存在听到居高临下的风险（不是我的意图）：你有如此丰富的明确换行符，人们可能会认为你是trolololing。

您在使用<br />标记的每个复选框后强制line break。如果您不想换行，请删除<br />代码。
<p>代码不是label的合适替代品。大多数浏览器将<p>标记设置为display: block（强制后续元素在新行上开始），因为此标记在语义上表示段落。如果要设置复选框文本的样式，请将其包装在＆＃34; unsemantic＆＃34;而是span。
如前一点所述，display: block强制以下元素在新行上开始。您正在使用input { display:block; }将此样式添加到CSS中的所有输入元素。我不确定你为什么这样做，但我建议使用一个类来使选择器更具体。
您正在使用input { width: 276px; }在所有输入元素上设置显式宽度。这为fieldset中的复选框的标签文本留下了空间，因此文本将被推送到下一行。

由于您没有提供表单外观的示例图像，我甚至不打算尝试提供其他代码来解决您的问题。但是，希望你能够用我提供的事实来解决这个问题。

总之，您应该考虑将复选框包装在label元素中，以允许用户点击标签文本以选择相关的复选框：

<label>
    <input type="checkbox" name="animal" value="Cat" /> Cats
</label>

复选框未显示在内联中

2 个答案: