通过外部.js文件内联显示列表元素

我使用外部脚本和外部样式创建了一个简单的html页面。在其中使用< li>元素显示菜单列表。通过外部.js文件内联显示列表元素

我的页面中的问题是，列表元素以块方式垂直显示，尽管它们应该以内联方式显示。我无法找到纠正的错误，所以在这里我附上了所有相关的代码。如果你找到它，请帮助我知道错误。谢谢。

<!DOCTYPE HTML> 
<html> 
<head> 
<title> 
WEB pAGE 
</title> 
<link rel="stylesheet" type="text/css" href="mystyle.css"> 
<div class="div1"> 
<h1 align="center">Hello</h1> 
</div> 
<script src="myscript.js"></script> 
</head> 
<body onload = "myfunction()"> 
<br><br><br><br><br><br> 
<div class="div3"><br></div> 
<div class="mmm">abcde</div> 
</body> 
</html>

myscript.js

function myfunction() { 
var x = document.getElementsByClassName("mmm"); 
x[0].innerHTML = x[0].innerHTML = '<ul id="menu" align="center"><li id= "m1"><a href="abc.html" id="tn" > Abc</a></li><br> <li id= "m1"> <a href="def.html" id="tn">DEF</a></li><br><li id= "m1"><a href="ghi" id="tn" >GHI</a></li><br><li id= "m1"><a href="jkl.html" id="tn"> JKL</a></li></ul> '; 
}

mystyle.css

h1 { 
    font-family:Comic Sans MS; 
    } 
.div1 { 
    position:fixed; 
    height:110px; 
    width:1350px; 
    background-color:Teal; 
    color:White; 
    margin:0px; 
    padding:0px; 
    } 
.mmm{ position:fixed; 
    top:115px; 
    left:419px; 
    background-color:#69A005; 
    color:White; 
    height:50px; 
    width:1000px; 
} 
.div3{ position:fixed; 
    top:115px; 
    background-color:#69A005; 
    color:White; 
    height:50px; 
    width:430px; 
    } 
ul#menu{ color:white; 
    margin:5px; 
    padding:0px; 
        } 
li#m1 { 
    display:inline; 
    margin:10px; 
    padding:10px; 
    color:White; 
    } 
a#tn { display:inline; 
      width:90px; 
    background-color:#000000; 
    padding:5px; 
    }

来源

2015-04-23 Tzrinz doggu

从下面的Javascript函数中删除
标记。即使使用display：inline，
也将始终转到下一行。

function myfunction() { 
var x = document.getElementsByClassName("mmm"); 
x[0].innerHTML = x[0].innerHTML = '<ul id="menu" align="center"><li id= "m1"><a href="abc.html" id="tn" > Abc</a></li><br> <li id= "m1"> <a href="def.html" id="tn">DEF</a></li><br><li id= "m1"><a href="ghi" id="tn" >GHI</a></li><li id= "m1"><a href="jkl.html" id="tn"> JKL</a></li></ul> '; 
}

来源

2015-04-23 12:07:23

从JS取下BR标签添加HTML。这不仅是无效的HTML，即使使用display:inline，它也会解决问题，因为它们会强制换行。

此外，您不能重复使用ID。您只能每页使用一次ID。

您添加了HTML（和调整后的CSS）应该看起来更像这样。

ul#menu { 
 
    color:white; 
 
    margin:5px; 
 
    padding:0px; 
 
} 
 
ul#menu li { 
 
    display:inline; 
 
    margin:10px; 
 
    padding:10px; 
 
    color:White; 
 
} 
 
ul#menu li a { 
 
    display:inline; 
 
    width:90px; 
 
    /* removed for clarity 
 
    background-color:#000000; 
 
    */ 
 
    padding:5px; 
 
}

<ul id="menu" align="center"> 
 
    <li id="m1"><a href="abc.html" id="tn1"> Abc</a> 
 

 
    </li> 
 
    <li id="m2"> <a href="def.html" id="tn2">DEF</a> 
 

 
    </li> 
 
    <li id="m3"><a href="ghi" id="tn3">GHI</a> 
 

 
    </li> 
 
    <li id="m3"><a href="jkl.html" id="tn4"> JKL</a> 
 

 
    </li> 
 
</ul>

正如你可以看到我已经删除了休息标签br和调整，不能再使用的所有ID。

来源

2015-04-23 12:06:39

工作Fiddle。

更改CSS类：

.mmm{ 
    position:fixed; 
    top:115px; 
    background-color:#69A005; 
    color:White; 
    height:50px; 
    width:1000px; 
}

而且你的JS代码（删除br标签）：

x[0].innerHTML = '<ul id="menu" align="center"><li id= "m1"><a href="abc.html" id="tn" > Abc</a></li> <li id= "m1"> <a href="def.html" id="tn">DEF</a></li><li id= "m1"><a href="ghi" id="tn" >GHI</a></li><li id= "m1"><a href="jkl.html" id="tn"> JKL</a></li></ul> ';

来源

2015-04-23 12:07:33 ArinCool

通过外部.js文件内联显示列表元素

回答

相关问题