Question

我试图以水平的方式显示'headeri'的每个元素，如果有任何帮助的话，我已经附上了js。我试图使用标签和img标签（依次）将类和id名称（两者都依次）添加到css文件中，但无济于事。

var loaded = false;
function loadImages(){}
function react(img, plain){}

function loadImages()
{
img1plain = new Image(0,0);
img1plain.src = 'plain1.gif';
img1over = new Image(0,0);
img1over.src  = 'over1.gif';

img2plain = new Image(0,0);
img2plain.src = 'plain2.gif';
img2over = new Image(0,0);
img2over.src  = 'over2.gif';

img3plain = new Image(0,0);
img3plain.src = 'plain3.gif';
img3over = new Image(0,0);
img3over.src  = 'over3.gif';

loaded = true;
}

function react(img, plain)
{
	if (loaded)
		{
		if (plain) document[img].src = eval(img + "plain.src");
		else document[img].src = eval(img + "over.src");
		}
}

.headeri{
	
	display: inline-block;
}

<header>
	<A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
	<A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
	<A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A><BR>
</header>

Answer 1

删除<BR>代码

var loaded = false;
function loadImages(){}
function react(img, plain){}

function loadImages()
{
img1plain = new Image(0,0);
img1plain.src = 'plain1.gif';
img1over = new Image(0,0);
img1over.src  = 'over1.gif';

img2plain = new Image(0,0);
img2plain.src = 'plain2.gif';
img2over = new Image(0,0);
img2over.src  = 'over2.gif';

img3plain = new Image(0,0);
img3plain.src = 'plain3.gif';
img3over = new Image(0,0);
img3over.src  = 'over3.gif';

loaded = true;
}

function react(img, plain)
{
	if (loaded)
		{
		if (plain) document[img].src = eval(img + "plain.src");
		else document[img].src = eval(img + "over.src");
		}
}

.headeri{
	
	display: inline-block;
}

<header>
	<A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A>
	<A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A>
	<A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A>
</header>

Answer 2

删除每个<br>标记后面的<a> - 这些是您的换行符所在的位置，而不是CSS。

此外，a元素默认为内嵌显示，因此除非您需要块渲染（例如边距），否则您可以使用默认显示，而不是明确设置，并且您的链接将在一个线。

Answer 3

请删除br标签并再次检查。

<header>
    <A HREF="#top" class="headeri" onMouseOver="react('img1', false);return true" onMouseOut="react('img1', true);return true"><IMG SRC="plain1.gif" NAME="img1" WIDTH=150 HEIGHT=25 BORDER=0></A>
    <A HREF="#top" class="headeri"onMouseOver="react('img2', false);return true" onMouseOut="react('img2', true);return true"><IMG SRC="plain2.gif" NAME="img2" WIDTH=150 HEIGHT=25 BORDER=0></A>
    <A HREF="#top" class="headeri"onMouseOver="react('img3', false);return true" onMouseOut="react('img3', true);return true"><IMG SRC="plain3.gif" NAME="img3" WIDTH=150 HEIGHT=25 BORDER=0></A>
</header>

css显示：内联无法正常工作

3 个答案: