我想向下移动文本但不移动一行我还想通过图像看到一行的其余部分如果靠近图像我看不到该行
我的代码:
.NavigationTable {
clear: Both;
float: right;
text-align: right;
font-family: sans-serif;
padding-top: 70px;
}
.ImageLogo {
clear: both;
float: left;
text-align: center;
}
.line {
line-height: 10px
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF=8">
<meta name="description" content="denvware software solutions">
<title>Denvware</title>
</head>
<body style="background-color:rgb(255, 255, 255)">
<header>
<img src="Logo1denv.png" width="170" style="background-color:antiquewhite" class="ImageLogo" />
<table>
<tr class="NavigationTable">
<td>Home</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
</header>
<main>
<hr class="line" style="position:relative; top:100px;">
</main>
<footer>
</footer>
</body>
</html>最佳答案
我决定提供一种替代方法。有很多方法可以实现这种布局，但我推荐 flexbox .它可以使 Logo 和菜单保持在同一行，并且菜单垂直居中。
我正在使用 border-bottom而不是 <hr>和 <ul>而不是 <table>用于导航。
这是一个演示:
body {
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
display: flex;
align-items: center;
border-bottom: 1px solid gray;
}
.nav {
flex: 1 0 auto;
list-style: none;
margin: 0;
padding: 0;
display: flex;
font-family: sans-serif;
}
.nav li {
margin: 0 0 0 2em;
}
main {
flex: 1 0 auto;
padding: 2%;
background-color: lightgreen;
}
footer {
flex: 0 0 auto;
padding: 2%;
background-color: lightblue;
}<body>
<header>
<img src="https://picsum.photos/id/118/50/50" width="50" height="50" alt="">
<ul class="nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</header>
<main>
Main
</main>
<footer>
Footer
</footer>
</body>关于html - 我需要向下移动文本，但没有一条线随之移动，我想让一条线穿过图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56780956/