通過外部.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文件內聯顯示列表元素

回答

相關問題