Question

I have been working on a simple website to develop my skills in HTML and CSS. I have been having a problem where I can't seem to make some elements in a class enter a bar along the top of the page.

Here is a snippit of the html.

<body>
    <!-- A logo will go here but here is some text for now -->
    <h1 ID="Logo">Website</h1>
    <img Class="Social" src="assets/facebook.png"/>
    <img Class="Social" src="assets/twitter.png"/>
    <img Class="Social" src="assets/instagram.png"/>
    <img Class="Social" src="assets/snapchat.png"/>
    <!-- The menu bar -->
    <ul class="menu" ID="Menu_Bar">
        <li Class="Menu_Item" ID="Home">
            <a Class="Menu_Link" href="index.html">Home</a>
        </li>
        <li Class="Menu_Item" ID="About_Us">
            <a Class="Menu_Link" href="about.html">About Us</a>
        </li>
        <li Class="Menu_Item" ID="Events">
            <a Class="Menu_Link" href="events.html">Events</a>
        </li>
        <li Class="Menu_Item" ID="Contact">
            <a Class="Menu_Link" href="contact.html">Contact Us</a>
        </li>
    </ul>
    <!-- An image-->
    <img ID="theGang" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg"/>
</body>

The ID Logo makes a top bar that stretches accross the entire top of the screen, I can't seem to make the items in class "Social" enter this top bar. They seem to sit directly beneath it.

Here is the css.

/* allows elements to use the full lengths of the webpage */
* {
    margin: 0px;
    border: 0px;
    padding: 0px;
}

body {
    margin: 0px;
    padding: 0px;
}

/* this is the formatting for the logo */
#Logo{
    font-family: 'Germania One', cursive;
    font-size: 80px;
    color: #2E2F44;
    background-color: #DE1B2B;
}

.Social {
  float: right;

}

/*
*=== Formats the menu bar for the webpage
*===Begin===*
*/
.menu{
    position: fixed;
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #2E2F44;
    font-family: 'Germania One', cursive;
    font-size: 20px;
}

.Menu_Item{
    float: left;
}

.Menu_Item .Menu_Link {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.Menu_Item .Menu_Link:hover {
    background-color: #DE1B2B;
}
/*
*===End===*
*/

/* Formats the header image, 'z-index' makes the image fall behind the nav bar */
#theGang{
    position: absolute;
    max-width: 100%;
    height: auto;
    display: none;
    z-index: -1;
}

Answer 1

如果您将display: inline-block添加到#Logo css规则，那么左侧将保留#Logo，并且旁边的.Social元素就是您要查找的内容您想要保留红色条和“网站”字旁边的.Social元素吗？

Answer 2

迭戈是对的。包装徽标和社交元素可以让您正确应用花车。

您还可以考虑使用Flexbox将布局应用于页面元素，而不必依赖浮点数;它最近也被认为是一种更加语义化的方法。这是使用flexbox属性的另一个示例：

/* allows elements to use the full lengths of the webpage */

* {
  margin: 0px;
  border: 0px;
  padding: 0px;
}

body {
  margin: 0px;
  padding: 0px;
}


/* this is the formatting for the logo */

#Logo {
  font-size: 80px;
}

.logo-section {
  display: flex;
  font-family: 'Germania One', cursive;
  color: #2E2F44;
  background-color: #DE1B2B;
  justify-content: space-between;
  align-items: center;
}

.Social {
  width: 24px;
}


/*
*=== Formats the menu bar for the webpage
*===Begin===*
*/

.menu {
  position: fixed;
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #2E2F44;
  font-family: 'Germania One', cursive;
  font-size: 20px;
}

.Menu_Item {
  float: left;
}

.Menu_Item .Menu_Link {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.Menu_Item .Menu_Link:hover {
  background-color: #DE1B2B;
}


/*
*===End===*
*/


/* Formats the header image, 'z-index' makes the image fall behind the nav bar */

#theGang {
  position: absolute;
  max-width: 100%;
  height: auto;
  display: none;
  z-index: -1;
}

<body>
  <!-- A logo will go here but here is some text for now -->
  <section class="logo-section">
    <h1 ID="Logo">Website</h1>

    <div class="social-icons">
      <img Class="Social" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-social-facebook.svg" />
      <img Class="Social" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-social-twitter.svg" />
      <img Class="Social" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-social-instagram.svg" />
      <img Class="Social" src="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/svgs/fi-social-snapchat.svg" />
    </div>
  </section>

  <nav>
    <!-- The menu bar -->
    <ul class="menu" ID="Menu_Bar">
      <li Class="Menu_Item" ID="Home">
        <a Class="Menu_Link" href="index.html">Home</a>
      </li>
      <li Class="Menu_Item" ID="About_Us">
        <a Class="Menu_Link" href="about.html">About Us</a>
      </li>
      <li Class="Menu_Item" ID="Events">
        <a Class="Menu_Link" href="events.html">Events</a>
      </li>
      <li Class="Menu_Item" ID="Contact">
        <a Class="Menu_Link" href="contact.html">Contact Us</a>
      </li>
    </ul>
  </nav>
  <!-- An image-->
  <img ID="theGang" src="https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg" />
</body>

HTML Elements not entering top bar

2 个答案: