Question

我这里有一个CSS问题，我的顶级div就像我想要的那样，但是我的链接div在这里失败了，如果我填入填充，它会在它下面，但会高于我想要的div是的，我的问题是：

我希望“link”div在我的“top”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;
}

Answer 1

更改#lin的css以显示：inline-block＆amp;删除不需要的CSS

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

jsfiddle

Answer 2

目前不确定原因，但您可以通过更改<ul>的{{1}}属性来解决此问题。

#lin {
    display: inline-block;
}

Answer 3

我在＆＃39;＃lin＆＃39;上添加了属性边距。但我不知道这是不是你想要的

＆＃13;

callback

＆＃13;

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

＆＃13;

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

3 个答案: