Question

我很难练习，无法弄清楚这可以挽救我的生命。 7小时试图找到解决方案，无济于事！什么都不会让步。

我只是希望文本位于此站点或此站点a link之类的中间。而不是所有白色，我想要一个不透明的黑色框，上面有文字。我的文字到处都是。左侧为徽标，右侧为导航栏/菜单。 https://imgur.com/a/1oCKaco 链接到代码。 https://codepen.io/admitdefeat/pen/BEyMzK

HTML

1 0000 0000

CSS

<div class="post-body">
  <p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
      its look and how you feel when you see it!</p>
</div>

谢谢。

我观看了有关如何定位，divs，容器的视频，并尝试将信息放在一起。但是，我有些不了解。

我希望页面对齐并定位。

Answer 1

请不要感到压力，如果您希望菜单始终位于右上方，只需为其提供规则：

`#menu{
    position: fixed;
    right: 5px; /* or the amount you want */
    top: 5px; /* or the amount you want */
}`

在徽标上应用相同的逻辑，最后添加text-align: center;，使您的文本位于页面的中心，瞧！

Answer 2

在您的.post-body类中，删除padding-top: 3rem和position: relative，因为它们会干扰您的格式。然后添加text-align: center以使文本在页面上居中，并添加margin: 100px 20%以限制文本的位置。您可以根据目标位置将这两个值更改为所需的值。第一个值（100px）是您要让文本开始的顶部距离（y轴），第二个值（20％）是您要使文本距左右边缘的距离（x-轴）。

请注意，将％值用作第二个值将根据屏幕大小为您动态调整文本的大小。在这种情况下，无论您使用的是哪种设备，它始终都是屏幕尺寸的20％。

  body {
  font-family: "Basier";
  font-size: 20px;
}

html {
  background: url(summer.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

.post-body {
  box-sizing: inherit;
  text-align: center;
  margin: 100px 20%;
}

div {
  display: block;
}

@font-face {
  font-family: "Basier";
  src: url("basiersquare-regular-webfont.ttf");
}

.logo {
  width: 150px;
  height: 140 px;
}


/*Strip the ul of padding and list styling*/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: absolute;
}


/*Create a horizontal list with spacing*/

li {
  display: inline-block;
  float: left;
  margin-right: 0 px;
}


/*Style for menu links*/

li a {
  display: block;
  min-width: 140px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  font-family: "Basier";
  color: #fff;
  background: #2f3036;
  text-decoration: none;
}


/*Hover state for top level links*/

li:hover a {
  background: #F4D03F;
}


/*Style for dropdown links*/

li:hover ul a {
  background: #F4D03F;
  color: #2f3036;
  height: 40px;
  line-height: 40px;
}


/*Hover state for dropdown links*/

li:hover ul a:hover {
  background: f1c40f;
  color: #fff;
}


/*Hide dropdown links until they are needed*/

li ul {
  display: none;
}


/*Make dropdown links vertical*/

li ul li {
  display: block;
  float: none;
}


/*Prevent text wrapping*/

li ul li a {
  width: auto;
  min-width: 100px;
  padding: 0 20px;
}


/*Display the dropdown on hover*/

ul li a:hover+.hidden,
.hidden:hover {
  display: block;
}


/*Style 'show menu' label button and hide it by default*/

.show-menu {
  font-family: "Basier";
  text-decoration: none;
  color: #F4D03F;
  background: #F4D03F;
  text-align: center;
  padding: 10px 0;
  display: none;
}


/*Hide checkbox*/

input[type=checkbox] {
  display: none;
}


/*Show menu when invisible checkbox is checked*/

input[type=checkbox]:checked~#menu {
  display: block;
}

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  ul {
    position: static;
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'show menu' link*/
  .show-menu {
    display: block;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CLT Designs</title>
  <link href="hoise.ico" rel="shortcut icon" type="image/x-icon">
  <meta charset="utf-8">
  <link href="designs.css" rel="stylesheet">
</head>

<body>

  <img class="logo" src="clt.png" alt="logoclt">

  <h2> RENOVATION PROJECT</h2>
  <label for="show-menu" class="show-menu">Show Menu</label>
  <input type="checkbox" id="show-menu" role="button">
  <ul id="menu">
    <li><a href="thahomepage.html">Home</a></li>
    <li><a href="ABOUT.html">About</a></li>
    <li>
      <a href="Services.html">Services</a>
      <ul class="hidden">
        <li><a href="#">What is Design + Build?</a></li>
        <li><a href="#">Our Process</a></li>
      </ul>
    </li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>

  <div class="post-body">
    <p>Do you need something done to your home or around your home? Do you feel as if your home doesn't have the same appeal as when you got it? Call our team of professionals and we can do what is needed to your home, yard and business that will improve
      its look and how you feel when you see it!</p>

  </div>

</body>

</html>

Answer 3

我尝试以绝对和相对位置进行操作，希望这可以解决您的问题。我只修改了一点代码。

检查此密码笔 https://codepen.io/jls314/pen/oOgVGz

您希望徽标位于左侧，导航栏位于右侧，因此我将它们放到标题标签中并放置。

<header>
    <img class="logo" src="clt.png" alt="logoclt">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu" role="button">
    <ul id="menu">
    <li><a href="thahomepage.html">Home</a></li>
    <li><a href="ABOUT.html">About</a></li>
    <li>
    <a href="Services.html">Services</a>
  <ul class="hidden">
    <li><a href="#">What is Design + Build?</a></li>
    <li><a href="#">Our Process</a></li>
  </ul>
    </li>
    <li><a href="Portfolio.html">Portfolio</a></li>
    <li><a href="Contact.html">Contact</a></li>
  </ul>
</header>

这是CSS：

header {
    position: relative;
}

.logo {
    position: absolute;
    left: 10px;
    width: 150px;
    height: 140px;
    float: left;
}
#menu {
    position: absolute;
    right: 10px;
}

.post-body{    
    position: relative;
    top: 200px;
    box-sizing: inherit;
    width: 50%;
    margin: 0px auto;
    background: rgba(0,0,0,.7);
    color: white;
}

如何在CSS的导航栏对面的左侧和左侧放置文本主体？

3 个答案: