我有这样的数据,我从ajax请求获得,我想让它们出现在同一行;这里是我的代码如何使用jQuery添加图像和标题
HTML
<div id="one"></div>
jQuery的
$getJSON(...,function(data){
$("#one").append("<img src="+ data.image_icon +">"+"<h3>" +data.title"</h3>")
})
当我这样做的项目不显示在同一行。我能做些什么使两者出现在同一行?
我有这样的数据,我从ajax请求获得,我想让它们出现在同一行;这里是我的代码如何使用jQuery添加图像和标题
HTML
<div id="one"></div>
jQuery的
$getJSON(...,function(data){
$("#one").append("<img src="+ data.image_icon +">"+"<h3>" +data.title"</h3>")
})
当我这样做的项目不显示在同一行。我能做些什么使两者出现在同一行?
使用display: inline-block;
的元素h3
并给予singlequotes('
)在正确的位置,像下面
var image_icon = 'http://placehold.it/140x158';
var title = 'title';
$("#one").append("<img src='" + image_icon + "'>" + "<h3>" + title + "</h3>");
h3 {
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one"></div>
h3
加入
img {
display: inline-block;
}
是一个封闭元素。您必须覆盖display
属性。
试试这个:
h3 { display: inline-block; }
img { display: inline-block; }
谢谢非常感谢 – Emma
非常感谢 – Emma