如何在同一行上制作两个按钮？

Question

我创建了两个按钮，然后我将它们带到相同的do = iv，id = dvSearchTitle。

以下是代码：

     var button = $('<button/>', {
             text: data.d.txtSearch, 
             id: 'btnFeatureLocation',
             click: function () 
             {  
                        parent.parent.mapFrame.SetSelectionXML(data.d.featureSelection);
                        parent.parent.mapFrame.ZoomSelection();     
             }
        }); 

             var button2 = $('<button/>', {
             text: "ddd", 
             id: 'ddd',
             click: function () 
             {  
                alert("ddd");
             }
        }); 

    $('#dvSearchTitle').append(button);
    $('#dvSearchTitle').append(button2);

结果我得到一个在另一个上面的两个按钮。

我需要在同一行上制作两个按钮。

更新

这是JSFiddle。

我需要更改以在同一行上制作两个按钮？

Answer 1

在你的css中试试这个：

#dvSearchTitle button {display:inline-block}

Answer 2

查看此答案here

简而言之：

style ="display: inline-block;"

Answer 3

请将宽度btnFeatureLocation更改为100％并在第二个按钮中添加相同的css。

		 var button = $('<button/>', {
				 text: "button1", 
				 id: 'btnFeatureLocation',
				 click: function () 
				 {  
							//some logic
				 }
			});	
			
		 var button2 = $('<button/>', {
				 text: "button2", 
				 id: 'ddd',
				 click: function () 
				 {  
					alert("ddd");
				 }
			});	
			
						
		$('#dvSearchTitle').append(button);
		$('#dvSearchTitle').append(button2);

.exosphere{
	border: solid 1px #333;
	-webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);	
}


.searchResults{
	background-color: rgba(255, 255, 255,0.7);
	 position:absolute; 
	 z-index:100;
	left: 20%;
	overflow: hidden;
	font-family: Arial; 
	font-size: 14pt;
}


#btnFeatureLocation{
	 width: 50%; 
	 height:40px;
	 border: 1px black solid;
	 font-weight: bold; 
}

#ddd{
	 width: 50%; 
	 height:40px;
	 border: 1px black solid;
	 font-weight: bold; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dvSearchTitle" class="exosphere searchResults"></div>