【问题标题】:Why won't my text align with my image?为什么我的文字与我的图像不对齐?
【发布时间】:2016-10-15 15:18:21
【问题描述】:

我希望我的徽标、描述文本和导航栏都位于我网站顶部的同一条线上。他们不会对齐,我无法为我的生活找出原因。它们都在同一行,但描述文本低于其他文本。填充和边距似乎没有什么不同。

/* Title Area */

#title {
  float: left;
}
.sep {
  padding: 20px;
}
.desc {
  padding: 20px 0px;
}
/*Topnav */

.nav-primary {
  float: right;
  margin-top: 1px;
}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: white;
  display: inline-block;
}
ul.topnav li {
  float: left;
}
ul.topnav li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
ul.topnav li a:hover {
  background-color: floralwhite;
}
<div class="header">
  <div id="title">
    <p>
      <img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png" />
      <span class="sep">|</span>
      <span class="desc">Help For The Undomesticated Homemaker</span>
    </p>
  </div>
  <nav class="nav-primary">
    <ul class="topnav" id="myTopnav">
      <li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a>
      </li>
      <li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a>
      </li>
    </ul>
  </nav>
</div>

【问题讨论】:

    标签: html css header navbar


    【解决方案1】:

    .header:after {
          content: '';
          display: block;
          clear: both;
        }
        
        #title {
          float: left;
        }
        
        #title p {
          margin: 0;
        }
        
        #title p > * {
          display: inline-block;
          vertical-align: middle;
        }
        
        .nav-primary {
          float: right;
        }
        
        .nav-primary ul {
          margin: 0;
          padding: 0;
          list-style-type: none;
        }
        
        .nav-primary ul li {
          float: left;
          padding-right: 15px;
          line-height: 40px;
        }
    <div class="header">
      <div id="title">
        <p>
          <img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png" />
          <span class="sep">|</span>
          <span class="desc">Help For The Undomesticated Homemaker</span>
        </p>
      </div>
      <nav class="nav-primary">
        <ul class="topnav" id="myTopnav">
          <li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a>
          </li>
          <li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a>
          </li>
          <li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a>
          </li>
          <li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a>
          </li>
        </ul>
      </nav>
    </div>

    我已使用基本设置修改了您的 CSS,以将所有内容对齐在 1 行中,其余部分按您的意愿进行修改

    .header:after {
      content: '';
      display: block;
      clear: both;
    }
    
    #title {
      float: left;
    }
    
    #title p {
      margin: 0;
    }
    
    #title p > * {
      display: inline-block;
      vertical-align: middle;
    }
    
    .nav-primary {
      float: right;
    }
    
    .nav-primary ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    
    .nav-primary ul li {
      float: left;
      padding-right: 15px;
      line-height: 40px;
    }
    

    【讨论】:

    • 没有什么不同。图像徽标和导航栏正是它们应有的位置,只是跨度类“sep”和跨度类“desc”太低了。它们位于 div 容器的底部,即使我在底部添加边距,它们也不会向上移动。
    【解决方案2】:

    css

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    

    html

    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
    </ul>
    

    链接:-http://www.w3schools.com/css/css_navbar.asp

    【讨论】:

      【解决方案3】:

      好吧,我删除了 Paragraph 并简单地使用 flexbox 来获得平滑且响应迅速的标题:

      <div class="header">
      <div id="title">
          <img src="http://i1379.photobucket.com/albums/ah150/beccaday02/blog%20title_zpsi4lf0fqz.png"/>
          <span class="sep">|</span>
          <span class="desc">Help For The Undomesticated Homemaker</span>
      </div>    
      <nav class="nav-primary">
          <ul class="topnav" id="myTopnav">
              <li><a href="http://www.nappiesandnailpolish.com/p/start-here.html">Start Here</a></li>
              <li><a href="http://www.nappiesandnailpolish.com/p/write-for-us.html">Write For Me</a></li>
              <li><a href="http://www.nappiesandnailpolish.com/p/advertise.html">Advertise</a></li>
              <li><a href="http://www.nappiesandnailpolish.com/p/contact.html">Contact</a></li>
          </ul>
      </nav>
      </div>
      

      和css:

      /* Title Area */
      
      .header {
        display: flex;
        justify-content: space-between;
      }
      
      #title {
        display: flex;
        align-items: center;
      }
      
      .sep {
      padding: 20px;
      }
      
      .desc {
      padding: 20px 0px;
      }
      
      /*Topnav */
      
      .nav-primary {
        display: flex;
        align-items: center;
      float:right;
      margin-top: 1px;
      }
      
      ul.topnav {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: white;
      display: inline-block;
      }
      
      ul.topnav li{
      float: left;
      }
      
      ul.topnav li a{
      display: block;
      color: black;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      }
      
      ul.topnav li a:hover {background-color: floralwhite;}
      

      你可以阅读更多关于 flexbox here

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2016-03-21
        • 1970-01-01
        • 2018-05-24
        • 2010-11-17
        • 1970-01-01
        • 2012-03-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多