2017-03-22 62 views
-2

我想将性别标签和邮件以及女性标签和单选按钮排成一行 - 为什么它们是垂直的?默认情况下它们必须是水平的。标签标签和单选按钮不水平

.regform { 
 
    direction: rtl; 
 
    text-align: right; 
 
    max-width: 500px; 
 
    padding: 20px 20px; 
 
    background: #f4f7f8; 
 
    margin: 10px auto; 
 
    background: #f4f7f8; 
 
    border-radius: 8px; 
 
    font-family: 'IRYekan', tahoma; 
 
} 
 

 
.regform fieldset { 
 
    border: none; 
 
} 
 

 
.regform legend { 
 
    font-size: 1em; 
 
    margin-bottom: 10px; 
 
} 
 

 
.regform input[type="text"], 
 
.regform input[type="date"], 
 
.regform input[type="datetime"], 
 
.regform input[type="email"], 
 
.regform input[type="number"], 
 
.regform input[type="search"], 
 
.regform input[type="time"], 
 
.regform input[type="url"], 
 
.regform textarea, 
 
.regform select { 
 
    direction: rtl; 
 
    text-align: right; 
 
    font-family: 'IRYekan', tahoma; 
 
    background: rgba(255, 255, 255, .1); 
 
    border: none; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 10px; 
 
    width: 100%; 
 
    background-color: #e8eeef; 
 
    color: #8a97a0; 
 
    margin-bottom: 30px; 
 
} 
 

 
.regform input[type="text"]:focus, 
 
.regform input[type="date"]:focus, 
 
.regform input[type="datetime"]:focus, 
 
.regform input[type="email"]:focus, 
 
.regform input[type="number"]:focus, 
 
.regform input[type="search"]:focus, 
 
.regform input[type="time"]:focus, 
 
.regform input[type="url"]:focus, 
 
.regform textarea:focus, 
 
.regform select:focus { 
 
    background: #d2d9dd; 
 
} 
 

 
.regform .number { 
 
    direction: rtl; 
 
    background: #1abc9c; 
 
    color: #fff; 
 
    height: 30px; 
 
    width: 30px; 
 
    display: inline-block; 
 
    font-family: 'IRYekan', tahoma; 
 
    font-size: 0.8em; 
 
    margin-right: 4px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); 
 
    border-radius: 15px 15px 15px 0px; 
 
} 
 

 
.regform label { 
 
    direction: rtl; 
 
    display: block; 
 
    color: #8a97a0; 
 
    margin-bottom: 8px; 
 
}
<div class="regform"> 
 
    <form> 
 
    <fieldset> 
 
     <legend><span class="number">1</span> Personal Info </legend> 
 
     <input type="text" name="" placeholder="Name"> 
 
     <input type="text" name="" placeholder="Family"> 
 
     <div class="gender"> 
 
     <label>Gender:</label> 
 
     <input type="radio" name="gender" id="male" value="male"> 
 
     <label for="male">male</label> 
 
     <input type="radio" name="gender" id="female" value="female"> 
 
     <label for="female">Female</label> 
 
     </div> 
 
    </fieldset> 
 
    </form> 
 
    <div>

+0

我创建了一个片段为你在这里通过点击'<>' - 这是更好的做比对外部网站 – mplungjan

+0

谢谢,我不知道:-) –

回答

3

这是因为标签被显示为块,从这个类中删除该行:

.regform label { 
    direction:rtl; 
    color:#8a97a0; 
    margin-bottom: 8px; 
} 

实施例:

.regform { 
 
    direction: rtl; 
 
    text-align: right; 
 
    max-width: 500px; 
 
    padding: 20px 20px; 
 
    background: #f4f7f8; 
 
    margin: 10px auto; 
 
    background: #f4f7f8; 
 
    border-radius: 8px; 
 
    font-family: 'IRYekan', tahoma; 
 
} 
 

 
.regform fieldset { 
 
    border: none; 
 
} 
 

 
.regform legend { 
 
    font-size: 1em; 
 
    margin-bottom: 10px; 
 
} 
 

 
.regform input[type="text"], 
 
.regform input[type="date"], 
 
.regform input[type="datetime"], 
 
.regform input[type="email"], 
 
.regform input[type="number"], 
 
.regform input[type="search"], 
 
.regform input[type="time"], 
 
.regform input[type="url"], 
 
.regform textarea, 
 
.regform select { 
 
    direction: rtl; 
 
    text-align: right; 
 
    font-family: 'IRYekan', tahoma; 
 
    background: rgba(255, 255, 255, .1); 
 
    border: none; 
 
    border-radius: 4px; 
 
    font-size: 16px; 
 
    margin: 0; 
 
    outline: 0; 
 
    padding: 10px; 
 
    width: 100%; 
 
    background-color: #e8eeef; 
 
    color: #8a97a0; 
 
    margin-bottom: 30px; 
 
} 
 

 
.regform input[type="text"]:focus, 
 
.regform input[type="date"]:focus, 
 
.regform input[type="datetime"]:focus, 
 
.regform input[type="email"]:focus, 
 
.regform input[type="number"]:focus, 
 
.regform input[type="search"]:focus, 
 
.regform input[type="time"]:focus, 
 
.regform input[type="url"]:focus, 
 
.regform textarea:focus, 
 
.regform select:focus { 
 
    background: #d2d9dd; 
 
} 
 

 
.regform .number { 
 
    direction: rtl; 
 
    background: #1abc9c; 
 
    color: #fff; 
 
    height: 30px; 
 
    width: 30px; 
 
    display: inline-block; 
 
    font-family: 'IRYekan', tahoma; 
 
    font-size: 0.8em; 
 
    margin-right: 4px; 
 
    line-height: 30px; 
 
    text-align: center; 
 
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); 
 
    border-radius: 15px 15px 15px 0px; 
 
} 
 

 
.regform label { 
 
    direction: rtl; 
 
    color: #8a97a0; 
 
    margin-bottom: 8px; 
 
}
<div class="regform"> 
 
    <form> 
 
    <fieldset> 
 
     <legend><span class="number">1</span> Personal Info </legend> 
 
     <input type="text" name="" placeholder="Name"> 
 
     <input type="text" name="" placeholder="Family"> 
 
     <div class="gender"> 
 
     <label>Gender:</label> 
 
     <input type="radio" name="gender" id="male" value="male"> 
 
     <label for="male">male</label> 
 
     <input type="radio" name="gender" id="female" value="female"> 
 
     <label for="female">Female</label> 
 
     </div> 
 
    </fieldset> 
 
    </form> 
 
    <div>

2

您已在您的标签上使用display: block,为什么?如果您想删除,它的工作原理

.regform label { 
    direction:rtl; 
    color:#8a97a0; 
    margin-bottom: 8px; 
}