Question

我想这样制作我的网站的主屏幕：

我在HTML中有以下代码：

<body>
 <li class="aboutme"><a href="#">Over Mij</a></li>
 <li class="resume"><a href="#">Resumé</a></li>
 <img class="home_cartoon" src="cartoon.png">
 <li class="portfolio"><a href="#">Portfolio</a></li>
 <li class="contact"><a href="#">Contact</a></li>
</body>

我不知道如何使用CSS才能像添加的图像那样获得它，有人可以帮助我吗？

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  
}

li {
    float: left;
}

li a {
    display: block;
 
    text-align: center;
    padding: 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>


<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

只需在li元素中插入float：left，它将为u完成其余工作。请全屏查看，因为此示例对屏幕尺寸没有响应

Answer 2

首先，您必须在ul元素周围使用li容器，并将图像放入li中以获取有效的HTML。使所有li内联块并将vertical-align: middle;应用于它们：

li {
  display: inline-block;
  vertical-align: middle;
}

<body>
  <ul>
    <li class="aboutme"><a href="#">Over Mij</a></li>
    <li class="resume"><a href="#">Resumé</a></li>
    <li><img class="home_cartoon" src="https://placehold.it/120x200"></li>
    <li class="portfolio"><a href="#">Portfolio</a></li>
    <li class="contact"><a href="#">Contact</a></li>
  </ul>
</body>

Answer 3

您可以使用CSS网格布局进行此操作：

* {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  list-style-position: inside;
}

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 5px;
  height: 100px;
  height: 300px;
  justify-items: center;
}

li, img {
  border: 1px solid black;
}

li {
  align-self: center;
}

img {
  height: 100%;
}

<body>
   <li class="aboutme"><a href="#">Over Mij</a></li>
   <li class="resume"><a href="#">Resumé</a></li>
   <img class="home_cartoon" src="https://torange.biz/photofx/5/8/image-profile-picture-beautiful-exotic-flower-5532.jpg">
   <li class="portfolio"><a href="#">Portfolio</a></li>
   <li class="contact"><a href="#">Contact</a></li>
</body>

Answer 4

使用flexbox，类似于：

body{
display: flex;
align-items: center;
}

请确保容器的大小，在这种情况下为主体

如何在CSS中垂直对齐两个导航栏项目，然后是图像，然后又是两个对齐的导航栏项目？

4 个答案: