我正在尝试内联显示 3 个 div 并尝试使用容器 div 并将其设置为使用 inline-block 然而这没用。我是否遗漏了一些明显的东西？
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="tablebox" id="box1" style="display: inline-block; border: solid 1px black; width:500px; height:200px;">
<form class="form-horizontal">
<fieldset>
<legend>Form</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Fill this in</label>
<div class="col-md-4">
<select class="form-control" id="selectbasic" name="selectbasic">
<option value="1">Option 1</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="selectbasic">Option 2</label>
<div class="col-md-4">
<select class="form-control" id="selectbasic" name="selectbasic">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
<div id="example">
<div style="width:100%; white-space:nowrap;">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span>
</div>
<div id="wrapping">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span>
<div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span>
<p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">Sort these</span></p>
</div>
<div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;"></span>
</div>
</div>
</div>
</body>
</html>最佳答案
你想要这样的东西吗？
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="tablebox" id="box1" style="display: inline-block; border: solid 1px black; width:500px; height:200px;">
<form class="form-horizontal">
<fieldset>
<legend>Form</legend>
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<label class="control-label" for="selectbasic">Fill this in</label>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option 1</option>
</select>
</div>
<div class="col-md-6 col-sm-6 col-xs-6">
<label class="control-label" for="selectbasic">Option 2</label>
<select id="selectbasic" name="selectbasic" class="form-control">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
</div>
</div>
</fieldset>
</form>
</div>
<div id="example">
<div style="width:100%; white-space:nowrap;">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">
</span>
</div>
<div id="wrapping">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">
</span>
<div class="boxer" id="box1" style="border: solid 1px black; width:150px; height:400px;">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">
</span>
<p><span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">
Sort these</span></p>
</div>
<div class="box" id="box2" style="border: solid 1px black; width:1000px; height:400px;">
<span style="display: inline-block; vertical-align: top; padding: 5px; margin-left: 10px;">
</span>
</div>
</div>
</div>我将两个 select 排成一行，并给了它们 6 列。您可以将其更改为适合您需要的内容。
关于html - 如何在这个例子中内联显示 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39847617/