Display div elements in one line
Question
I have three elements in my div dropdown list, input date and button they are all in on div , i want all of them to be in the same line , not under each other
<div id="cont"> Status : <select id="dropdown"> <option value="Approved">Approved</option> <option value="Rejected">Rejected</option> <option value="Pending">Pending</option> <option value="Error">Error</option> </select> <!-- Date Picker --> <p>Date: <input type="text" id="datepicker"> </p> <button type="submit" id="searchBtn" value="">Search</button> </div>
4 answers
solution1
1 2016-10-27 15:55:46
You can add the display: inline-block property to the divs. This will make them get rendered inline with the content, but they keep their block properties, so you can still set their width and height for example.
Example:
.inline { display: inline-block; width: 50px; height: 20px; } #red { background-color: red; } #green { background-color: green; } #blue { background-color: blue; }
<div class="inline" id="red"></div> <div class="inline" id="blue"></div> <div class="inline" id="green"></div>
My favourite tutorial site about the topic: http://learnlayout.com/inline-block.html
This can be used for every element, which supports the display property. Some elements are even set to this by default, like the span element.
solution2
1 2016-10-27 20:44:05
Use CSS with display: inline-block
.inline { display: inline-block; }
<div id="cont"> Status: <select id="dropdown" class="inline"> <option value="Approved">Approved</option> <option value="Rejected">Rejected</option> <option value="Pending">Pending</option> <option value="Error">Error</option> </select> <!-- Date Picker --> <p class="inline">Date: <input type="text" id="datepicker"> </p> <button type="submit" id="searchBtn" value="" class="inline">Search</button> </div>
Although the above works, it's better practice to put the specific elements in a span tag. Like so ...
.inline { display: inline-block; }
<div id="cont"> <span class="inline">Status: <select id="dropdown"> <option value="Approved">Approved</option> <option value="Rejected">Rejected</option> <option value="Pending">Pending</option> <option value="Error">Error</option> </select> </span> <!-- Date Picker --> <span class="inline"> <p>Date: <input type="text" id="datepicker"></p> </span> <span class="inline"> <button type="submit" id="searchBtn" value="">Search</button> </span> </div>
solution3
-1 2016-10-27 15:55:09
将每个包装在div中并显示：inline-block。
solution4
-1 2016-10-27 15:56:27
https://jsfiddle.net/v9qxobaf/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<style media="screen">
#cont {
margin-left: -20px;
}
.status, .date, .button {
float: left;
padding-left: 20px;
}
</style>
<body>
<div id="cont">
<div class="status">
<label>Status: </label>
<select id="dropdown">
<option value="Approved">Approved</option>
<option value="Rejected">Rejected</option>
<option value="Pending">Pending</option>
<option value="Error">Error</option>
</select>
</div>
<div class="date">
<!-- Date Picker -->
<span> Date: <input type="text" id="datepicker"></span>
</div>
<div class="button">
<button type="submit" id="searchBtn" value="">Search</button>
</div>
</div>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.