我使用外部脚本和外部样式创建了一个简单的 html 页面。 在其中使用
我页面中的问题是列表元素以 block 的形式垂直显示，尽管它们应该以内联方式显示。 我找不到要更正的错误，所以在这里我附上了所有相关代码。如果您发现错误，请帮助我了解错误。 谢谢。
<!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;
}
最佳答案
从 JS 添加的 HTML 中删除 br 标签。这不仅是无效的 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。
关于javascript - 通过外部 .js 文件内联显示列表元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29822739/