如何消除<ul>标记和div之间的不必要间隙

Question

我无法消除导航栏和应该显示在导航栏下方的div之间的间隙。

这是我的代码：

     <%-- Nav Bar --%>

        <ul>
          <li> <a class="welcometitle"> Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
          <li class="dropdown">
              <div class="dropdown">
                  <button onclick="myFunction()" class="dropbtn"> <i class="fa fa-bars"></i> </button>
                  <div id="myDropdown" class="dropdown-content">
                        <a href="#home">Home</a>
                        <a href="#about">About</a>
                        <a href="#contact">Contact</a>
                  </div>
            </div>
          </li>
        </ul>

    <%-- Iframe --%>

    <div class="h_iframe">
    <iframe src="inicio.aspx" name="ventana" ></iframe>
    </div>

这是我正在使用的CSS：

    body 
{
    font: 14px 'Segoe UI','Helvetica Neue','Droid Sans',Arial,Tahoma,Geneva,Sans-serif;
    overflow-y: hidden;
}

html, body {
    height:100%;
    width:100%;
    margin:0;
}
.h_iframe iframe {
    width:100%;
    height:100%;
    margin-top:0;
}
.h_iframe {
    height: 100%;
    width:100%;
    margin-top:0;
    top:0;  
    z-index: -1; 
    padding-left:159px; 
    position: fixed absolute
}

.welcometitle{
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 1px 16px;
  padding-top:12px;
  text-decoration: none;
  font-size: 20px;
  font-weight:500;
}

ul {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  background-color: #006cb4;
  padding-left:163px;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  color: white;
}

.active {
  background-color: #4CAF50;
}


.li input[type=text] {
  padding: 6px;
  margin-top: 8px;
  font-size: 25px;
  border: none;
}
        img { 
          width: 92%; 
          padding-left:8px;
          margin:0;
          top:0;
        }

        .dropbtn {
          background-color: #111;
          color: white;
          padding: 16px;
          font-size: 16px;
          border: none;
          cursor: pointer;
        }

        .dropbtn:hover, .dropbtn:focus {
          background-color: #d4d4d4;
          color:#111;
        }

        .dropdown {
          position: relative;
          display: inline-block;
        }

        .dropdown-content {
          display: none;
          position: absolute;
          background-color: #f1f1f1;
          min-width: 160px;
          overflow: auto;
          box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
          z-index: 1;
          right:0;
        }

        .dropdown-content a {
          color: black;
          padding: 12px 16px;
          text-decoration: none;
          /*display: block;*/
        }

        .dropdown a:hover {background-color: #ddd;}

        .show {display: block;
               position: fixed;
        }

        .active {
          background-color: #4CAF50;
        }

我尝试了不同的方法，但似乎不起作用。你能找到我搞砸的地方吗？

Answer 1

您可以在iframe类中添加一些CSS

代码在这里：

$at