標籤標籤和單選按鈕不水平

-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>

來源

2017-03-22 Abbas Ekh

我創建了一個片段爲你在這裏通過點擊'<>' - 這是更好的做比對外部網站 – mplungjan

謝謝，我不知道:-) –

這是因爲標籤被顯示爲塊，從這個類中刪除該行：

.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>

來源

2017-03-22 14:28:20

您已在您的標籤上使用display: block，爲什麼？如果您想刪除，它的工作原理

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

來源

2017-03-22 14:28:55

標籤標籤和單選按鈕不水平

回答

相關問題