Question

我使用外部脚本和外部样式创建了一个简单的html页面。在其中使用＆lt;显示菜单列表。 li>元件。

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

<!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;
    }

Answer 1

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

Answer 2

从以下Javascript函数中删除
标签。
即使显示：内联使用，也会一直进入下一行。

library(data.table)
setDT(data)[,lapply(.SD, function(x) if(is.numeric(x)) sum(x) else .N),
                          by= list(VALUE_SEG,region)]

Answer 3

工作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> ';

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

3 个答案: