jQuery/css使两个div显示在同一行上
jQuery/css使两个div显示在同一行上
提问于 2018-06-01 09:13:28
假设我有以下html标记：
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
如何让div id="divTwo"和div id="divthree"出现在同一行？首先是divthree，然后是divTwo，使用的是jQuery还是css？
更新
我不能将div或其他元素添加到html代码中，它是这样呈现的，我只能使用js或css来更改它。
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-06-01 09:24:44
我更新了答案。我使用jQuery来追加新的div
var $newdiv1 = $( "<div class='selectInput'></div>"),
existingdiv2 = document.getElementById( "divTwo" ),
existingdiv3 = document.getElementById( "divthree" );
$( ".container" ).append( $newdiv1);
$( ".selectInput" ).append( [ existingdiv3, existingdiv2 ] );.selectInput{
display: flex;
}
#divthree{
margin-right: 20px;
}
#divTwo{
margin: auto 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="divOne">One div</div>
<div id="divTwo">
<span id="spanTwo">
<label>Input two:</label>
<input type="text" id="inputTwo" />
</span>
</div>
<div id="divthree">
<p>
<label>selectOne</label>
<span id="spanSelectOne">
<select id="selectOne">
<option value="opt1">Opt1</option>
<option value="opt2">Opt2</option>
</select>
</span>
<span id="spanSelectTwo">
<select id="selectOne">
<option value="opt01">Opt01</option>
<option value="opt02">Opt02</option>
</select>
</span>
</p>
</div>
</div>
Stack Overflow用户
发布于 2018-06-01 09:23:05
更改display属性以使它们以内联方式显示。
#divTwo, #divthree {
display: inline-block;
}Stack Overflow用户
发布于 2018-06-01 09:52:12
#divTwo, #divthree {
display: inline-block !important;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50634794
复制相关文章
相似问题