嘿我想创建一个像这样的首页网站:http://foreword.io/。
我需要帮助水平列表才能像foreword.io上的那样获得它。
我希望黄色区域一直延伸到两侧。当我将鼠标悬停在链接上时,它只标记正方形的上半部分,因此我希望它标记每个链接的整个正方形。
请提前帮助和谢谢。
这是我的代码:
body {
font-family: Times New Roman;
}
.h1 {
position: absolute;
height: 200px;
top: 90px;
width: 1585px;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
position: absolute;
height: 190px;
top: 340px;
width: 700px;
left: 500px;
font-size: 50px;
}
ul {
position: absolute;
height: 100px;
top: 600px;
left: 100px;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
}
li {
float: left;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}

<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte <br> og avdelinger</p>
</div>
<ul>
<li><a href="side1.html">Side1</a></li>
<li><a href="side2.html">Side2</a></li>
<li><a href="side3.html">Side3</a></li>
<li><a href="side4.html">Side4</a></li>
<li><a href="side5.html">Side5</a></li>
</ul>
&#13;
答案 0 :(得分:0)
你可以这样做,只需将高度选项添加到&#34; li a&#34; css部分如下:
li a {
display: block;
color: black;
height: 100px;
text-align: center;
padding: 20px;
text-decoration: none;
font-size:20px;
}
它将设置方块的高度,使整个黄色部分变为白色。
在黄色条形尺寸和项目位置的情况下:
将ul的宽度设置为100%,这样它将使用浏览器上的整个可用空间,同时删除&#34; left&#34;最后添加&#39; position:relative&#39;,&#39; left:20%&#39;和&#39;宽度:10%;到李节。
li {
position: relative;
left: 20%;
width: 10%;
float: left;
}
消息来源:我的头:-P
答案 1 :(得分:0)
编织: http://kodeweave.sourceforge.net/editor/#2b1da7103aeec07f8b53045481c63c77
对于非常简单的事情,您可以在不需要的地方使用margin
,而ul
可以替换text-align center
。因此,您的代码相当WET(尤其是我现在在平板电脑上)所以我创建了一个simple mockup DRY,如果您使用RWD也可以使用media-queries {{3}}
我删除了很多不必要的定位。通过将li
标记设置为inline-block
,我可以通过告知width: 100%; margin: 0; padding: 0;
标记显示为body {
font-family: Times New Roman;
}
.h1 {
width: 100%;
text-align: center;
font-size: 350%;
font-family: Times New Roman, Georgia;
}
u {
text-decoration: none;
border-bottom: 5px solid black;
}
.fakta {
width: 100%;
font-size: 50px;
text-align: center;
}
ul {
list-style-type: none;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: yellow;
text-align: center;
}
li {
display: inline-block;
}
li a {
display: block;
color: black;
text-align: center;
padding: 20px;
text-decoration: none;
font-size: 20px;
}
li a:hover {
background-color: white;
}
来使锚点居中。然后我使用<div class="h1">
<h1>
<u>DatabaseNavn</u>
</h1>
</div>
<div class="fakta">
<p>Database med ansatte og avdelinger</p>
</div>
<ul>
<li><a href="side1.html">Side1</a></li>
<li><a href="side2.html">Side2</a></li>
<li><a href="side3.html">Side3</a></li>
<li><a href="side4.html">Side4</a></li>
<li><a href="side5.html">Side5</a></li>
</ul>
此代码段有何帮助。
{{1}}
{{1}}
答案 2 :(得分:0)
使用display: inline-block;
代替display: block;
,您将获得一个水平列表。