HTML / CSS：在表单内设置复选框样式

问题描述 投票：1回答：7

我有以下表格：

使用此HTML：

<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
    <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
    <br>
    <input id="user_save" type="submit" value="Speichern">
</form>

这个CSS：

#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}

#user_form input[type="checkbox"] {
    width: 80%;
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 50px !important;
}

我不明白的是：

  1. 为什么复选框不对齐左侧。复选框左侧不应该有填充。我将margin和padding设置为0。
  2. 为什么复选框和textbos文本右侧之间有这么大的空间？文本需要直接在复选框的右侧，可能有20px填充。我还需要将文本垂直居中
  3. 为什么文字没有破线？与所有其他输入一样，复选框和文本的宽度应为80％。

希望您能够帮助我。

html css
7个回答
2
投票

https://jsfiddle.net/p04prk6p/这里是你需要的。只需在它周围分层

CSS

#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}

#user_form input[type="checkbox"] {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 50px !important;
    float: left;
}

#checkbox_div {
    width: 80%;
    margin: 0 auto;
    line-height: 50px;
}

HTML

<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
        <div id="checkbox_div"><input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</div>
    <br>
        <div style="clear: both"></div>
    <input id="user_save" type="submit" value="Speichern">
</form>
2
投票

您遇到的问题是您的复选框宽度为80％。这会导致它向右移动以及将文本推向右侧。

也不要使用!important，在你的情况下它不应该是必要的。

要使表单输入对齐，我建议您将它们全部包装然后将它们保留在左侧。而不是使用0 auto来集中输入。然后您的复选框将与输入正确对齐。你现在拥有它的方式，它永远不会保持正确的文本。

1
投票

#user_form input[type="text"], input[type="email"], input[type="submit"] { width: 80%; display: block; margin: 0 auto; height: 50px !important; font-size: 18px; line-height: normal; line-height: 32px\0/; /* for IE 8 */ } 
.CheckBox{ width: 80%; text-align: center;}
<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
   <p class="CheckBox"> <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</p>
    <br>
    <input id="user_save" type="submit" value="Speichern">
</form>
1
投票

#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}

#user_form input[type="checkbox"] {
    width: 30px;
    display: inline;
    margin: 0;
    padding: 0;
    height: 50px;
}
<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
    <input id="conditions" type="checkbox" name="conditions" required>Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
    <br>
    <input id="user_save" type="submit" value="Speichern">
</form>

你的问题是你的width财产。复选框的宽高比为1：1。所以给它一个30px的宽度就可以了。 80％真的很大

1
投票

1：您的输入[type ='checkbox']包含80％的宽度，使其方形大小为50px;

2：同样的问题你的输入是父级和边距的80％宽度：0自动居中。

3：对于换行，只有在文本中使用它时才能正常工作

1
投票
<style>
#user_form input[type="text"], input[type="email"], input[type="submit"] {
    width: 80%;
    display: block;
    margin: 0 auto;
    height: 50px !important;
    font-size: 18px;
    line-height: normal;
    line-height: 32px\0/;
    /* for IE 8 */
}
label{
    width: 100%;
    float: left;
    text-align: center;
    margin: 20px 0px;
}
label > a{
    color: #2a00ff;
    z-index: 99999;

}
</style>
<form id="user_form" name="user_form">
    <input id="firstname" type="text" name="firstname" placeholder="Vorname" required>
    <br>
    <input id="lastname" type="text" name="lastname" placeholder="Nachname" required>
    <br>
    <input id="nickname" type="text" name="nickname" placeholder="Nickname" required>
    <br>
    <input id="email" type="email" name="email" placeholder="Email" required>
    <br>
    <label>
    <input id="conditions" type="checkbox" name="conditions" required>
    Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!
    </label>
    <br>
    <input id="user_save" type="submit" value="Speichern">
</form>

1
投票

将您的复选框和标签包裹在div内，并给它宽度为80％。您可以删除填充和边距规则。

复选框的高度使其与文本不对齐。

文本将不会换行，因为宽度设置为复选框而不是文本。

#user_form input[type="text"],
input[type="email"],
input[type="submit"] {
  width: 80%;
  display: block;
  margin: 0 auto;
  height: 50px !important;
  font-size: 18px;
  line-height: normal;
  line-height: 32px\0/;
  /* for IE 8 */
}
#user_form input[type="checkbox"] {
  display: inline;
}
.checkbox {
  margin: 0 auto;
  width: 80%;
}
<form id="user_form" name="user_form">
  <input type="text" id="firstname" name="firstname" placeholder="Vorname" required="">
  <br>
  <input type="text" id="lastname" name="lastname" placeholder="Nachname" required="">
  <br>
  <input type="text" id="nickname" name="nickname" placeholder="Nickname" required="">
  <br>
  <input type="email" id="email" name="email" placeholder="Email" required="">
  <br>
  <div class="checkbox">
    <input type="checkbox" id="conditions" name="conditions" required="">
    <label for "conditions"="">Ich bin mit den <a id="show_2">Teilnahmebedingungen</a> einverstanden!</label>
  </div>
  <br>
  <input type="submit" id="user_save" value="Speichern">
</form>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.