2016-06-28 23 views
0

我已經使用HTML和CSS編寫了一個表單。當我應用display: inline-block屬性時,某些文本會轉到下一行,即使我沒有使用<br/>標記。我也嘗試增加fieldset元素的寬度,但沒有改變。使用內聯塊屬性時,文本進入下一行

我的代碼

fieldset { 
 
    background: lightyellow; 
 
    border: 10px solid yellow; 
 
    margin-bottom: 10px; 
 
    width: 720px; 
 
} 
 
label { 
 
    width: 180px; 
 
    display: inline-block; 
 
    text-align: right; 
 
    vertical-align: top; 
 
} 
 
#imp { 
 
    width: auto; 
 
} 
 
.imp { 
 
    text-align: center; 
 
} 
 
.imp { 
 
    text-align: right; 
 
    vertical-align: top; 
 
}
<body> 
 
    <h1>Please Enter Your Details For Our Dating Website</h1> 
 
    <fieldset> 
 
    <legend>Your Face</legend> 
 
    <label for="image">Your Image:</label> 
 
    <input type="file" name="image" required id="image"> 
 
    <br> 
 
    <label for="preview">Image Preview:</label> 
 
    <img id="preview" id="preview"> 
 
    <br> 
 
    </fieldset> 
 

 
    <br> 
 
    <fieldset> 
 
    <legend>Your General Details</legend> 
 
    <label for="name">Name:</label> 
 
    <input type="text" placeholder="Your full name" name="name" id="name"> 
 
    <br> 
 
    <label for="gender">Gender:</label>Male 
 
    <input type="radio" name="gender" value="male" id="gender">Female 
 
    <input type="radio" name="gender" name="female"> 
 
    <br> 
 
    <label for="age">Age:</label> 
 
    <input type="number" id="age"> 
 
    <br> 
 
    <label for="dob">Date of birth:</label> 
 
    <input type="date" id="dob"> 
 
    <br> 
 
    <label for="color">Favorite color:</label> 
 
    <input type="color" id="color"> 
 
    <br> 
 
    <label for="country">Which country:</label> 
 
    <select name="country" id="country"> 
 
     <option value=""></option> 
 
     <option value="india">India</option> 
 
     <option value="china">China</option> 
 
     <option value="japan">Japan</option> 
 
     <option value="koria">Koria</option> 
 
     <option value="australia">Australia</option> 
 
    </select> 
 
    <br> 
 
    </fieldset> 
 

 
    <br> 
 
    <fieldset> 
 
    <legend>Your Indicators</legend> 
 
    <label for="height">Height:</label><span class="imp"> Short</span> 
 
    <input id="height " type="range" min="0" max="100" name="height"><span class="imp"> Tall<span><br> 
 
    <label for = "salary">Salary: </label><span class = "imp"> Poor</span> 
 
    <input id="salary " type="range" min="0" max="100" name="salary"><span class="imp"> Rich<span> 
 
    </fieldset> 
 
    \t \t 
 
    <br> 
 
    <fieldset> 
 
    <legend>Your Contact Information</legend> 
 
    <label for = "email">Email: </label><input type = "email" name = "email"><br> 
 
    <label for = "mobile">Mobile: </label><input type = "tel" name = "telephone"><br> 
 
    <label for = id = "address">Address: <textarea name = "address" placeholder = "Input your address here." width = "360px" height = "50px"></textarea><br> 
 
    <label for = "contact" id = "imp">Method to contact you: </label> 
 
    <input id = "contact" type = "checkbox" name = "e_chat" value = "email">Email 
 
    <input id = "contact" type = "checkbox" name = "whatsapp" value = "whatsapp">Whatsapp 
 
    <input id = "contact" type = "checkbox" name = "in_app" value = "in_app">In-app chat 
 
    </fieldset> 
 
    <br><br> 
 
    <input type = "submit" value = "Submit"/> 
 
</body>

+0

哪個文本你是指在給定的代碼? – AmanSinghal

+0

地址標籤後面的textarea元素轉到下一行。 –

+0

刪除顯示:inline-block;從標籤,它將工作 – AmanSinghal

回答

1

第一件事,一定要關閉以下標籤。這似乎是造成一些問題。從這個

更改:

<label id="address"> 

要這樣:

<label id="address"></label> 
2

你忘記關閉label標籤在你textarea文本。

fieldset { 
 
    background: lightyellow; 
 
    border: 10px solid yellow; 
 
    margin-bottom: 10px; 
 
    width: 720px; 
 
} 
 
label { 
 
    width: 180px; 
 
    display: inline-block; 
 
    text-align: right; 
 
    vertical-align: top; 
 
} 
 
#imp { 
 
    width: auto; 
 
} 
 
.imp { 
 
    text-align: center; 
 
} 
 
.imp { 
 
    text-align: right; 
 
    vertical-align: top; 
 
}
<body> 
 
    <h1>Please Enter Your Details For Our Dating Website</h1> 
 
    <fieldset> 
 
    <legend>Your Face</legend> 
 
    <label for="image">Your Image:</label> 
 
    <input type="file" name="image" required id="image"> 
 
    <br> 
 
    <label for="preview">Image Preview:</label> 
 
    <img id="preview" id="preview"> 
 
    <br> 
 
    </fieldset> 
 

 
    <br> 
 
    <fieldset> 
 
    <legend>Your General Details</legend> 
 
    <label for="name">Name:</label> 
 
    <input type="text" placeholder="Your full name" name="name" id="name"> 
 
    <br> 
 
    <label for="gender">Gender:</label>Male 
 
    <input type="radio" name="gender" value="male" id="gender">Female 
 
    <input type="radio" name="gender" name="female"> 
 
    <br> 
 
    <label for="age">Age:</label> 
 
    <input type="number" id="age"> 
 
    <br> 
 
    <label for="dob">Date of birth:</label> 
 
    <input type="date" id="dob"> 
 
    <br> 
 
    <label for="color">Favorite color:</label> 
 
    <input type="color" id="color"> 
 
    <br> 
 
    <label for="country">Which country:</label> 
 
    <select name="country" id="country"> 
 
     <option value=""></option> 
 
     <option value="india">India</option> 
 
     <option value="china">China</option> 
 
     <option value="japan">Japan</option> 
 
     <option value="koria">Koria</option> 
 
     <option value="australia">Australia</option> 
 
    </select> 
 
    <br> 
 
    </fieldset> 
 

 
    <br> 
 
    <fieldset> 
 
    <legend>Your Indicators</legend> 
 
    <label for="height">Height:</label><span class="imp"> Short</span> 
 
    <input id="height " type="range" min="0" max="100" name="height"><span class="imp"> Tall<span><br> 
 
    \t \t \t <label for = "salary">Salary: </label><span class = "imp"> Poor</span> 
 
    <input id="salary " type="range" min="0" max="100" name="salary"><span class="imp"> Rich<span> 
 
    </fieldset> 
 
    \t \t 
 
    <br> 
 
    <fieldset> 
 
    <legend>Your Contact Information</legend> 
 
    <label for = "email">Email: </label><input type = "email" name = "email"><br> 
 
    <label for = "mobile">Mobile: </label><input type = "tel" name = "telephone"><br> 
 
    <label for ="address">Address:</label> <textarea name = "address" placeholder = "Input your address here." width = "360px" height = "50px"></textarea><br> 
 
    <label for = "contact" id = "imp">Method to contact you: </label> 
 
    <input id = "contact" type = "checkbox" name = "e_chat" value = "email">Email 
 
    <input id = "contact" type = "checkbox" name = "whatsapp" value = "whatsapp">Whatsapp 
 
    <input id = "contact" type = "checkbox" name = "in_app" value = "in_app">In-app chat 
 
    </fieldset> 
 
    <br><br> 
 
    <input type = "submit" value = "Submit"> 
 
</body>

相關問題