CSS显示：内联不起作用

Question

I am trying to display the each of the elements of 'headeri' in a horizontal manner, I've attached the js with it, if it's any help. I've tried to add the class and id name (both of them, in turn) to the css file using a tag and img tag (both of them, in turn), but to no avail.

 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

Remove <BR> Tag

 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

Remove the <br> behind each of your <a> tags - those are where your line breaks come from, not the CSS.

Also, a elements default to inline display, so unless you need the block rendering (for example for margins), you can just use the default display by not setting it explicitly, and your links will be in one line.

Answer 3

Please remove the br tags and check it again.

<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>