我的div不会直接堆叠在一起

我在这里有一个CSS问题，我的顶级div与我想要的一样，但是我的链接div在这里失败，如果我放入填充，它会在它下面，但会高于我想要的div，所以我的问题在这里：我的div不会直接堆叠在一起

我想要“链接”div在我的“顶部”div下是正确的。现在它会在div之间增加一点空间，而且这个空间是白色的，所以看起来很糟糕。

<%@ Master Language="C#" AutoEventWireup="true"  CodeFile="Hovedside.master.cs" Inherits="Hovedside" %> 

<!DOCTYPE html> 

<html> 
<head runat="server"> 
<title></title> 
<link rel="stylesheet" href="styling/stylinghoved.css" type="text/css" /> 
<asp:ContentPlaceHolder id="head" runat="server"> 
</asp:ContentPlaceHolder> 
<style type="text/css"> 
    .auto-style1 { 
     width: 94%; 
    } 
</style> 
</head> 
<body> 
<form id="form1" runat="server"> 
    <div> 
<div id="siden"> 
    <div id="top"> 
     <table id="toptable"> 
     <tr> 
      <td rowspan="2" id="toptablemilto" class="auto-style1"> 
       Milto 
      </td> 
      <td style="margin:auto"> 
       login // kurv 
      </td> 
      </tr> 
      <tr> 
       <td> 
        søg:&nbsp; 
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 

       </td> 
      </tr> 

     </table> 


    </div> 
     <div id="links"> 
      <ul id="lin"> 
     <li><asp:HyperLink ID="HyperLink1" runat="server">LK Produkter</asp:HyperLink></li> 
     <li><asp:HyperLink ID="HyperLink2" runat="server">Flash Light</asp:HyperLink></li> 
     <li><asp:HyperLink ID="HyperLink3" runat="server">Philips</asp:HyperLink></li> 
     <li><asp:HyperLink ID="HyperLink4" runat="server">HyperLink</asp:HyperLink></li> 
       </ul> 
    </div> 


    <div id="indhold"> 
    <asp:ContentPlaceHolder id="hovedsideplaceholder" runat="server"> 

    </asp:ContentPlaceHolder> 
     </div> 

    <div id="bund">bund</div> 
</div> 
     </div> 
</form> 
</body> 
</html> 

#siden { 
    margin: auto; 
    width: 80%; 
    overflow:hidden; 
    padding-bottom: 20px; 
} 

#top { 
    height: 150px; 
    background: linear-gradient(to top, #c2bcb5, #ffffff); 
} 

#top {} 

#toptable { 
    width: 100%; 
    height: 150px; 
} 
#toptablemilto { 
    width:80%; 
    font-size:80px; 
    padding-left:50px; 
    line-height:0px; 
} 

#bund { 
    clear:both; 
} 

#indhold {} 

#links { 
    height: 45px; 
    background: linear-gradient(to bottom, #c2bcb5, #ffffff); 
} 
#lin { 
    display: block; 
    list-style: none; 
    text-align: center; 
} 
#lin ul { 
    display: none; 
    list-style: none; 
} 
#lin li { 
    float: left; 
    display: block; 
    margin-top: 15px; 
    text-transform: uppercase; 
    padding: 0px 20px 0px 20px; 
    border-left: 1px solid #ffffff; 
} 
#lin a:link, #nav a:visited, #nav:active { 
    display: block; 
    color: #574c3f; 
    text-decoration: none; 
} 
#lin a:hover { 
    background-color: white; 
}

来源

2015-10-14 teddy larsen

不知道为什么，此刻，但是你可以通过改变display属性为您<ul>解决这个问题。

#lin { 
    display: inline-block; 
}

来源

2015-10-14 17:56:45 TylerH

THX了很多，在这里做的伎俩。 –

@teddylarsen没问题。如果它适合你，不要忘记检查“接受”复选标记，让其他具有相同问题的人知道！ – TylerH

变化#lin到显示的CSS：内联块&除去不需要的CSS

#lin { 
display: inline-block; 
list-style: none; 
text-align: center; 
    width:100%; 
}

jsfiddle

来源

2015-10-14 17:58:24 brk

我把属性余量上 '#lin'。但我不知道这是否是你想要的

#siden { 
 
margin: auto; 
 
width: 80%; 
 
overflow:hidden; 
 
padding-bottom: 20px; 
 
} 
 

 
#top { 
 

 
height: 150px; 
 
background: linear-gradient(to top, #c2bcb5, #ffffff); 
 
} 
 
#top { 
 

 
} 
 

 
#toptable { 
 
width: 100%; 
 
height: 150px; 
 
} 
 
#toptablemilto { 
 
width:80%; 
 
font-size:80px; 
 
padding-left:50px; 
 
line-height:0px; 
 

 
} 
 

 
#bund { 
 
clear:both; 
 

 
} 
 

 
#indhold { 
 

 
} 
 

 
#links { 
 

 
height: 45px; 
 
background: linear-gradient(to bottom, #c2bcb5, #ffffff); 
 

 
} 
 
#lin { 
 
display: block; 
 
list-style: none; 
 
text-align: center; 
 
} 
 
#lin ul { 
 
display: none; 
 
list-style: none; 
 

 
} 
 
#lin li { 
 
float: left; 
 
display: block; 
 
margin-top: 15px; 
 
text-transform: uppercase; 
 
padding: 0px 20px 0px 20px; 
 
border-left: 1px solid #ffffff; 
 
} 
 
#lin a:link, #nav a:visited, #nav:active { 
 
    display: block; 
 
    color: #574c3f; 
 
    text-decoration: none; 
 
} 
 
#lin a:hover { 
 
background-color: white; 
 
} 
 

 

 
#lin { 
 
    
 
margin: 0; 
 
    }

<!DOCTYPE html> 
 

 
<html> 
 
<head runat="server"> 
 
<title></title> 
 
<link rel="stylesheet" href="styling/stylinghoved.css" type="text/css" /> 
 
<asp:ContentPlaceHolder id="head" runat="server"> 
 
</asp:ContentPlaceHolder> 
 
<style type="text/css"> 
 
    .auto-style1 { 
 
     width: 94%; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<form id="form1" runat="server"> 
 
    <div> 
 
<div id="siden"> 
 
    <div id="top"> 
 
     <table id="toptable"> 
 
     <tr> 
 
      <td rowspan="2" id="toptablemilto" class="auto-style1"> 
 
       Milto 
 
      </td> 
 
      <td style="margin:auto"> 
 
       login // kurv 
 
      </td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        søg:&nbsp; 
 
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
 

 
       </td> 
 
      </tr> 
 

 
     </table> 
 

 

 
    </div> 
 
     <div id="links"> 
 
      <ul id="lin"> 
 
     <li><asp:HyperLink ID="HyperLink1" runat="server">LK Produkter</asp:HyperLink></li> 
 
     <li><asp:HyperLink ID="HyperLink2" runat="server">Flash Light</asp:HyperLink></li> 
 
     <li><asp:HyperLink ID="HyperLink3" runat="server">Philips</asp:HyperLink></li> 
 
     <li><asp:HyperLink ID="HyperLink4" runat="server">HyperLink</asp:HyperLink></li> 
 
       </ul> 
 
    </div> 
 

 

 
    <div id="indhold"> 
 
    <asp:ContentPlaceHolder id="hovedsideplaceholder" runat="server"> 
 

 
    </asp:ContentPlaceHolder> 
 
     </div> 
 

 
    <div id="bund">bund</div> 
 
</div> 
 
     </div> 
 
</form> 
 
</body> 
 
</html>

来源

2015-10-14 18:00:54 alexqoliveira

我的div不会直接堆叠在一起

回答

相关问题