2016-08-04 113 views
0

我试图以水平方式显示'headeri'的每个元素,如果它有任何帮助,我已经附加了js。我试着使用标签和img标签(依次是这两个标签)将class和id名称(它们都反过来)添加到css文件中,但无济于事。css display:inline not working

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) 
 
{ 
 
\t if (loaded) 
 
\t \t { 
 
\t \t if (plain) document[img].src = eval(img + "plain.src"); 
 
\t \t else document[img].src = eval(img + "over.src"); 
 
\t \t } 
 
}
.headeri{ 
 
\t 
 
\t display: inline-block; 
 
}
<header> 
 
\t <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> 
 
\t <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> 
 
\t <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>

+1

您在代码中创建一个新的换行有''
。将它们从代码中移除并且不需要'display:inline-block;'作为''不是块项目 – Andrew

+0

删除
两个标签之间 –

+0

此外,您的代码看起来有些奇怪,是一些'All Caps'和一些'Lower案件'你应该有所有'小写'代码 – Andrew

回答

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) 
 
{ 
 
\t if (loaded) 
 
\t \t { 
 
\t \t if (plain) document[img].src = eval(img + "plain.src"); 
 
\t \t else document[img].src = eval(img + "over.src"); 
 
\t \t } 
 
}
.headeri{ 
 
\t 
 
\t display: inline-block; 
 
}
<header> 
 
\t <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> 
 
\t <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> 
 
\t <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>

0

删除每个<a>标签背后的<br> - 这些都是在您的换行符从何而来,而不是CSS。

另外,a元素默认为内联显示,因此除非需要块渲染(例如边距),否则您可以通过不显式设置默认显示,并且链接将位于一行中。

0

请删除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>