如何让这些元素显示在同一行？

时间：2017-03-22 23:42:24

标签： jquery html css

我在这里遇到了一些问题，并希望有人可以指出我正确的方向。我对CSS很新，所以我肯定我可能没有打电话或者可能没有在这里正确定义。无论如何，我希望你能提供帮助。

  1. 我的符号（AwesomeFonts）没有与文本内联，而是在它下方跳跃。我尝试将其设置为内联块，但它似乎表现得像块元素!!!

  2. 我的h1代码导致我的

    元素完全脱离我的帖子div !!

    3. 奖金：CSS书籍，教程，帮助我变得更好的任何事情都是目标！

    我的代码如下：

            <!DOCTYPE html>
        <html>
        <head>
        <title>Cultcakes</title>
        <link href="hover.css" rel="stylesheet" type="text/css" />
        <link href="css/mainstyle.css" rel="stylesheet" type="text/css" />

        <link href="https://fonts.googleapis.com/css?family=Space+Mono"             rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Crimson+Text" rel="stylesheet">
        <script src="https://use.fontawesome.com/3d519e8670.js"></script>


        </head>

        <body>
        <div id="wrapper">
        <nav>
        <section>
        <img src="Images/Chalk_instagram.png"><img src="Images/Chalk_pinterest.png"><img src="Images/Chalk_twitter.png">
        </section>
        <ul>
            <li><a href="#">Home <i class="fa fa-arrow-left hvr-icon-pulse-grow  " aria-hidden="true"></i></a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Destinations</a></li>
            <li><a href="#">Gallery</a></li>
        </ul>
       </nav>
       <section id="details">
       <div id="posts">
       <p>
       <h1>TITLE</h1>
        Aliquam tempus odio non bibendum cursus. Donec eget est eu elit mattis iaculis. Phasellus et odio placerat, porta dui vitae, dictum urna. Maecenas vestibulum consequat varius. Nam quam arcu, molestie eu vestibulum et, tempor non urna. Sed fringilla nec turpis eu pellentesque. Vivamus mi velit, porta non tortor id, bibendum molestie tortor. Suspendisse arcu augue, malesuada in odio id, dignissim sagittis ligula. Duis quis enim vitae velit lobortis egestas ac id mauris. Sed dictum pharetra quam, et egestas est placerat sit amet. Aenean at lacus ut magna sagittis tincidunt. Vivamus pulvinar nunc enim, ut bibendum massa semper non. Nunc euismod ex nec nisl viverra feugiat. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>

      <p>
        Nunc ut malesuada diam. Fusce risus leo, ullamcorper sed lobortis ut, malesuada et nulla. Morbi lacinia quam erat, eget cursus mi accumsan at. In nec congue dolor. Nulla tortor libero, condimentum ut justo feugiat, commodo ultrices erat. Praesent quis tempus ligula. Curabitur fringilla diam nisi, nec cursus sem mattis ut. Donec at auctor tellus.
    </p>
    <p>
    <h1> TITLE</h1>
        Donec mattis bibendum justo accumsan semper. In gravida tincidunt libero. Nunc ac eros sed libero feugiat tempus at in tellus. Pellentesque dui diam, pretium egestas tincidunt quis, vehicula vitae sapien. Nulla at massa tempus, lacinia est ac, varius lacus. Fusce porta, tortor vel interdum congue, sapien nunc tempor massa, et congue elit nulla at dolor. Fusce luctus auctor diam, nec pellentesque augue. Mauris at sapien tincidunt, pharetra odio sit amet, pellentesque metus.

    </p>

    <p>
        Donec mattis bibendum justo accumsan semper. In gravida tincidunt libero. Nunc ac eros sed libero feugiat tempus at in tellus. Pellentesque dui diam, pretium egestas tincidunt quis, vehicula vitae sapien. Nulla at massa tempus, lacinia est ac, varius lacus. Fusce porta, tortor vel interdum congue, sapien nunc tempor massa, et congue elit nulla at dolor. Fusce luctus auctor diam, nec pellentesque augue. Mauris at sapien tincidunt, pharetra odio sit amet, pellentesque metus.

    </p>
    </div>
    </section>
</div>
</body>
<footer>
</footer>
</html>

    我的mainstyle.CSS代码在这里：

    *{
    margin: 0;
    padding: 0;
}
body {
    background-color: #F8C0C8;
    color: #DC143C;
    font-family: 'Crimson Text', serif;
    background-image:  url("http://s3.amazonaws.com/spoonflower/public/design_thumbnails/0465/6155/rrhearts_bg_pink_shop_preview.png");
    background-repeat: repeat;
}
nav {
    position: fixed;
    display: block;
    height: 100%;
    width: 20%;
    background-color: #FCA6AB;
    border-right: 3px solid white;
    text-align: center;
}
ul {
    display: block;
    margin-top: 100px;

}
h1 {
    background-color: pink;
    font-size: 10px;
}
li {

    font-family: 'Crimson Text', serif;
    margin-top: 105px;
    font-size: 24px;
    text-align: center;
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}
a {
    display: inline-block;
}
li a{
    display: block;
    color: white;
    padding: 8px 16px;
    text-decoration: none;

}
li a:hover{
    background-color: #F8C0C8;
    color: #E7656D;
}

div#wrapper {
    margin: 0px;
    padding: 0px;
}
/* Background Image */
article#img {
    height: 1024px;
    width: 900px;
    display: inline-block;
    background-image: url("cakechick.jpg")  ;
    background-repeat: no-repeat;
    margin-left: 275px;

    }

/*----overlay----*/
article.overlay{
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0,0,0,0.5); /*dim the background*/
}
section {
    display: block;
    margin-top: 50px;
    width: 80%;


}
section img {
    padding: 2px;
    height: 40px;
    width: 40px;

}
section#details {
    display: inline-block;
    position: absolute;
    left: 270px;



}
section#details p {
    padding: 30px;
    margin: 10px;
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    background-color: white;
}
div#post {
    position: inherit;
    padding: 50px;
}

    我的hover.css我一直试图尝试：D 

    /* Icon Pulse Grow */
@-webkit-keyframes hvr-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
@keyframes hvr-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}
.hvr-icon-pulse-grow {
  display: inline-block;
  position: absolute;
  margin-left: 40px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;


}
.hvr-icon-pulse-grow:before {
  content: "\f060";
  position: absolute;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-icon-pulse-grow:hover:before, .hvr-icon-pulse-grow:focus:before, .hvr-icon-pulse-grow:active:before {
  -webkit-animation-name: hvr-icon-pulse-grow;
  animation-name: hvr-icon-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}

2 个答案:

答案 0 :(得分：0)

关于问题：

  1. 我想我错过了什么，你能澄清并提供更多信息吗？
  2. 可能是因为你的mainstyle.CSS中有拼写错误：div#post应该是div#posts以匹配你的HTML <div id="posts">。

    3. 希望这有帮助！

答案 1 :(得分：0)

要改进代码的一些事情：

  • 将min-width: 200px;添加到nav。这使得ul不能够小到足以“碰撞”列表项下面的图标。
  • 将h1带出段落并将p和h1标记用.post
    • 打包
  • 将h1更改为h3。每页只应有一个h1标记，例如页面标题，h2通常是副标题，即口号。 h3非常适合帖子的标题。

JSfiddle 

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #F8C0C8;
  color: #DC143C;
  font-family: 'Crimson Text', serif;
  background-image: url("http://s3.amazonaws.com/spoonflower/public/design_thumbnails/0465/6155/rrhearts_bg_pink_shop_preview.png");
  background-repeat: repeat;
}

nav {
  position: fixed;
  display: block;
  height: 100%;
  width: 20%;
  min-width: 200px;
  /* This code */
  background-color: #FCA6AB;
  border-right: 3px solid white;
  text-align: center;
}

ul {
  display: block;
  margin-top: 100px;
}

h3 {
  background-color: pink;
  font-size: 10px;
}

li {
  font-family: 'Crimson Text', serif;
  margin-top: 105px;
  font-size: 24px;
  text-align: center;
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
}

a {
  display: inline-block;
}

li a {
  display: block;
  color: white;
  padding: 8px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #F8C0C8;
  color: #E7656D;
}

div#wrapper {
  margin: 0px;
  padding: 0px;
}


/* Background Image */

article#img {
  height: 1024px;
  width: 900px;
  display: inline-block;
  background-image: url("cakechick.jpg");
  background-repeat: no-repeat;
  margin-left: 275px;
}


/*----overlay----*/

article.overlay {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.5);
  /*dim the background*/
}

section {
  display: block;
  margin-top: 50px;
  width: 80%;
}

section img {
  padding: 2px;
  height: 40px;
  width: 40px;
}

section#details {
  display: inline-block;
  position: absolute;
  left: 270px;
}

section#details .post {
  padding: 30px;
  margin: 10px;
  border-style: solid;
  border-width: 2px;
  border-radius: 10px;
  background-color: white;
}

div#post {
  /* #posts? */
  position: inherit;
  padding: 50px;
}


/* Icon Pulse Grow */

@-webkit-keyframes hvr-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}

@keyframes hvr-icon-pulse-grow {
  to {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }
}

.hvr-icon-pulse-grow {
  display: inline-block;
  position: absolute;
  margin-left: 40px;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
}

.hvr-icon-pulse-grow:before {
  content: "\f060";
  position: absolute;
  font-family: FontAwesome;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.hvr-icon-pulse-grow:hover:before,
.hvr-icon-pulse-grow:focus:before,
.hvr-icon-pulse-grow:active:before {
  -webkit-animation-name: hvr-icon-pulse-grow;
  animation-name: hvr-icon-pulse-grow;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
<script src="https://use.fontawesome.com/3d519e8670.js"></script>
<div id="wrapper">
  <nav>
    <section>
      <img src="Images/Chalk_instagram.png"><img src="Images/Chalk_pinterest.png"><img src="Images/Chalk_twitter.png">
    </section>
    <ul>
      <li><a href="#"><span>Home</span><i class="fa fa-arrow-left hvr-icon-pulse-grow  " aria-hidden="true"></i></a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Destinations</a></li>
      <li><a href="#">Gallery</a></li>
    </ul>
  </nav>
  <section id="details">
    <div id="posts">
      <div class="post">
        <h3>TITLE</h3>
        <p>
          Aliquam tempus odio non bibendum cursus. Donec eget est eu elit mattis iaculis. Phasellus et odio placerat, porta dui vitae, dictum urna. Maecenas vestibulum consequat varius. Nam quam arcu, molestie eu vestibulum et, tempor non urna. Sed fringilla nec
          turpis eu pellentesque. Vivamus mi velit, porta non tortor id, bibendum molestie tortor. Suspendisse arcu augue, malesuada in odio id, dignissim sagittis ligula. Duis quis enim vitae velit lobortis egestas ac id mauris. Sed dictum pharetra quam,
          et egestas est placerat sit amet. Aenean at lacus ut magna sagittis tincidunt. Vivamus pulvinar nunc enim, ut bibendum massa semper non. Nunc euismod ex nec nisl viverra feugiat. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient
          montes, nascetur ridiculus mus.
        </p>
      </div>


      <div class="post">
        <p>
          Nunc ut malesuada diam. Fusce risus leo, ullamcorper sed lobortis ut, malesuada et nulla. Morbi lacinia quam erat, eget cursus mi accumsan at. In nec congue dolor. Nulla tortor libero, condimentum ut justo feugiat, commodo ultrices erat. Praesent quis
          tempus ligula. Curabitur fringilla diam nisi, nec cursus sem mattis ut. Donec at auctor tellus.
        </p>

      </div>

      <div class="post">
        <h3> TITLE</h3>
        <p> Donec mattis bibendum justo accumsan semper. In gravida tincidunt libero. Nunc ac eros sed libero feugiat tempus at in tellus. Pellentesque dui diam, pretium egestas tincidunt quis, vehicula vitae sapien. Nulla at massa tempus, lacinia est ac,
          varius lacus. Fusce porta, tortor vel interdum congue, sapien nunc tempor massa, et congue elit nulla at dolor. Fusce luctus auctor diam, nec pellentesque augue. Mauris at sapien tincidunt, pharetra odio sit amet, pellentesque metus.

        </p>

      </div>
      <div class="post">
        <p>
          Donec mattis bibendum justo accumsan semper. In gravida tincidunt libero. Nunc ac eros sed libero feugiat tempus at in tellus. Pellentesque dui diam, pretium egestas tincidunt quis, vehicula vitae sapien. Nulla at massa tempus, lacinia est ac, varius
          lacus. Fusce porta, tortor vel interdum congue, sapien nunc tempor massa, et congue elit nulla at dolor. Fusce luctus auctor diam, nec pellentesque augue. Mauris at sapien tincidunt, pharetra odio sit amet, pellentesque metus.

        </p>
      </div>
    </div>
  </section>
</div>

注意：点击“运行代码段”，然后点击“展开代码段”以查看整页。

JSfiddle

相关问题
最新问题