Html 格式化a<;时如何删除多余的空行;ul>;无序列表?

Html 格式化a<;时如何删除多余的空行;ul>;无序列表?,html,css,Html,Css,我想在屏幕左侧创建一个垂直菜单。 我使用在线CSS按钮生成器创建了效果,并使用它格式化菜单中的标记。 问题是,在Firefox和Chrome中,我在列表的开头有一个额外的“按钮”,并将第一个菜单标签向右推。我还没有足够的分数发布打印屏幕。 在IE下,空白菜单不出现,但角落和阴影不起作用。现在我不介意 以下是HTML文件中的列表: <div id="myButton"> <ul> <li><a href="#" >Text</a>&l

我想在屏幕左侧创建一个垂直菜单。 我使用在线CSS按钮生成器创建了效果,并使用它格式化菜单中的
  • 标记。 问题是,在Firefox和Chrome中,我在列表的开头有一个额外的“按钮”,并将第一个菜单标签向右推。我还没有足够的分数发布打印屏幕。 在IE下,空白菜单不出现,但角落和阴影不起作用。现在我不介意

    以下是HTML文件中的列表:

    <div id="myButton">
    <ul>
      <li><a href="#" >Text</a></li>
      <li><a href="#" >Text</a></li>
      <li><a href="#" >Text</a></li>
       <li><a href="#" >Text</a></li>
       <li><a href="#" >Text</a></li>
       <li><a href="#" >Text</a></li>
     </ul>
     </div>
    

    正如其他用户建议的那样,我也尝试了JSFIDLE,代码运行良好

    问题是
    ,因此它创建了一个空元素。
    在使用源代码查看器检查页面时发现,第一个
    为红色

    问题在于代码
    在你的头脑中

    把它拿开,试试看

    应该是


    你不希望锚定标签出现在你的脑海中。

    在很多情况下,你可以用锚定标签代替屏幕标签。。。无法在小提琴中重现问题:这是什么?从源代码中删除它,一切都会正常工作。所以,问题不在您呈现的代码中——问题在于糟糕的HTML格式。(如果您在Firefox中查看源代码-错误将被标记为红色,这会有帮助:)只需关闭它。它放在那里是为了搜索引擎区域优化。元素在哪里,提供的标记不包含这样的元素。。你们都在说什么?!
    #myButton ul{
        margin: 0; 
        padding: 0;
        width:185px;
        list-style-type: none;
    }
    
     #myButton li a{
        -moz-box-shadow:inset 0px 0px 0px 0px #54a3f7;
        -webkit-box-shadow:inset 0px 0px 0px 0px #54a3f7;
        box-shadow:inset 0px 0px 0px 0px #54a3f7;
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
        background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
        background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
        background-color:#007dc1;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:1px solid #124d77;
        border-bottom: 1px solid white;
        display:block;
        cursor:pointer;
        color:#ffffff;
        font-family:arial;
        font-size:15px;
        padding:10px 10px;
        text-decoration:none;
        text-shadow:1px 2px 0px #154682;
    }
    
    #myButton li a:hover {
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0061a7), color-stop(1, #007dc1));
        background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%);
        background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0061a7', endColorstr='#007dc1',GradientType=0);
        background-color:#0061a7;
        position:relative;
        left:10px;
    }
    #myButton li a:active {
        position:relative;
        top:1px;
    }