猿问

创建垂直导航栏,标题和表单均位于右侧,如图所示

我希望页面的样式如下:

但我无法摆脱左上角的块。


这是我的代码:


html:


</head>

<body>

  <header>

     <h1>Contacts</h1>

  </header>


  <nav>

      <a href="">Contacts</a>

      <a href="">Call Log</a>

     </nav>


<main>

  <p>Enter text below and click Search button to find a contact</p>

  <form name="searchform">

  <label for="name">Name: </label>

  <input id="name" type="text" name="name" value="">

<br>

<label for="name">Company: </label>

<input id="company" type="text" name="company" value="">

<br>

<label for="ddi">Telephone: </label>

<input id="ddi" type="tel" name="ddi" value="">

<br>


<button name="search" type="button" onclick="process()">Search</button>


</form>


</main>


</body>

</html>

我已经尝试了很长时间,但似乎不知道如何做到这一点。

我怎样才能实现我所需要的?


largeQ
浏览 108回答 2
2回答

FFIVE

如果通过“去掉左上角的块”你的意思是去掉那里的蓝色空间,你已经拥有了。如果您想要蓝色空间,请将标题的宽度更改为 100%。

手掌心

尝试使用 CSS 网格进行此类布局。 CSS 网格使得创建这样的布局变得非常容易。 这是使用 CSS 网格的基本布局。body {&nbsp; display:grid;&nbsp; grid-template-areas:&nbsp; "h h"&nbsp; &nbsp;"c f";}nav {&nbsp; &nbsp; &nbsp;grid-area: c;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; background-color: #409fff;&nbsp; &nbsp; /* display: inline-block; */&nbsp; &nbsp; /* width: 20%; */&nbsp; &nbsp; min-width: 125px;&nbsp; &nbsp; /* margin-right: 15px; */&nbsp; &nbsp; height: 100vh;}nav a {&nbsp; &nbsp; &nbsp;display: block;&nbsp; &nbsp; line-height: 45px;&nbsp; &nbsp; height: 45px;&nbsp; &nbsp; color: #ffffff;&nbsp; &nbsp; /* background-color: #486b02; */&nbsp; &nbsp; /* text-decoration: none; */&nbsp; &nbsp; /* background-color: #486b02; */&nbsp; &nbsp; /* padding-left: 50px; */&nbsp; &nbsp; margin: 10px 0 10px 5px;}header {&nbsp; grid-area: h;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; /* display: inline-block; */&nbsp; &nbsp; background: #409fff;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; float: right;}h1 {&nbsp; margin: 0;&nbsp; padding: 0;&nbsp; /*&nbsp; &nbsp;box-sizing:border-box; */&nbsp; display: inline;&nbsp; color: #ffffff;&nbsp; font-family: sans-serif, Arial, "Times New Roman";}main {&nbsp; grid-area:f;&nbsp; background-color: yellow;}input,textarea {&nbsp; border-radius: 5px;}
随时随地看视频慕课网APP

相关分类

Html5
我要回答