1
親タグエレメントにAタグを埋めようとしています。しかし、私が何を試しても、うまくいかないようです。 私は多くの様々な他のスタックオーバーフローのページを見ていると、彼らはすべての状態がAタグに親TDタグを埋め込むように見えない
child-element{
display: block;
width: 100%;
}
を行うにはしかし、これは私の場合で動作するように見えていません。
HTML
<body>
<div id="wrapper">
<div id="header">
<table align="center">
<td class="nav-link"><a href="/">Main</a></td>
<td class="nav-link"><a href="/test/">Test</a></td>
<td class="nav-link"><a href="/faq/">FAQ</a></td>
</table>
</div>
<div id="main">
<h1 style="line-height: 0%">Header</h1>
<p style="line-height: 0%; font-size: 1vw">_________________________________________________________________________________________________________</p>
<br>
<br>
</div>
</div>
</body>
CSS
html {
font-family: "Times New Roman", Times, serif;
color: white;
}
#wrapper {
background-color: black;
background: #50a3a2;
background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
}
a {
color: white;
text-decoration: none;
background-color: none;
cursor: pointer;
}
#wrapper,
#header,
#main {
padding: 10px 15px;
margin: 0 auto 10px auto;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
#header {
min-width: 40vw;
max-width: 50vw;
}
#main {
min-height: 65vh;
}
.nav-link {
float: left;
padding: 10px 15px;
margin: 0 5px 0 5px;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
}
.nav-link:hover {
background-color: rgba(255, 255, 255, 0.4);
}
.nav-link a {
display: block;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
}
あなたは、これはあなたがここに見ることができ、表示を参照したい場合：https://jsfiddle.net/wverhe/8gcypffm/
ありがとう！ これを試しましたが、幅と高さを削除するのを忘れました。 –