gpt4 book ai didi

javascript - 如何将带有图像的 div 与带有文本的另一个 div 保持在同一行

转载 作者:太空宇宙 更新时间:2023-11-04 00:04:30 25 4
gpt4 key购买 nike

我很难让我的蓝色添加图像与字母表中的字母位于同一行。正如您在此处看到的,它始终显示在字母表下方:

enter image description here

这是 HTML,展示了我最近的尝试(white-space:nowrap):

<div style="width:900px">
<fieldset>
<div style="width:900px"><h2>abook</h2></div>
<div class="center" id="headerAlphabet" style="white-space:nowrap"></div>
</fieldset>
</div>

下面是我准备好的 JavaScript 函数。该循环通过附加到 div 来创建字母表中的字母。然后,当它添加添加图像时,它会在一个新行结束。

这是我最近的尝试,显示了float:left。我还尝试了 display:blockdisplay:inline。我也试过将它们放在 anchor 标签中。我还尝试过其他我现在不记得的事情。

$(function () {
// Show the letters of the alphabet, with a link to call GetEntries() for each of them.
for (var i = 65; i <= 90; i++) {
$('#headerAlphabet').append('<a href=\"#\" onclick=\"GetEntries(\''
+ String.fromCharCode(i) + '\')\">'
+ String.fromCharCode(i) + '</a> ');
}

$('#headerAlphabet').append('<a href=\"#\" onclick=\"AddEntry()\">'
+ '<img src=\"/Scripts/Home/add.png\" title=\"Add contact\" style=\"float:left\" /></a>')
});

我发现的每个解决方案都说要执行我在上面尝试过的操作,但没有任何效果。如何让我的添加图像与字母表位于同一行?

最佳答案

http://jsfiddle.net/VKmN7/

我猜您正在使用 css 重置或类似的东西,将所有 img 标签设置为 display:block;。将附加的 img 设置为 display:inline;:

a img { display:inline; }

关于javascript - 如何将带有图像的 div 与带有文本的另一个 div 保持在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15423232/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com