正确设置导航菜单？

时间：2018-04-19 11:16:34

标签： html css header nav

我正在尝试让我的Nav菜单文本在徽标旁边彼此相邻，就像真正的网站一样。 我制作了一个侧面的模型，供以下链接用于查看目的。

我一直在强调自己完成这个简单平凡的任务，弄乱边距，填充，浮动等等，无论我对我的任何元素做什么，要么发生任何事情，要么一大堆狗屎开始全部飞行在那个地方，我甚至不明白为什么。

My mockup Preview

How mine looks at present 

/*The Main Background*/
body {
    background-image: url(../img/background.png);
    background-repeat: repeat-x
} 
.container {
    width: 960px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    line-height: 1.5;
}
.HeaderBike{
    background-image: url(../img/HeaderBike.png);
    background-position: 260px 70px;
    background-repeat: no-repeat;
    height: 382px;
}

/* Nav Element */

/* Header Element */
.site-navigation li {
    height: 21px;
    width: 49px;
    margin-left: 35px;
    margin-right: 11px;
    float: left;
}
.site-navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    float:left;
    text-align: center;
}
.site-navigation a:hover {
    padding-bottom: 2px;
    border-bottom: 1px solid white;
}

/* navmenu */
.navmenu{
    margin-top:15px;
    width: 490px;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    color: #fff;
}
.search{
    float: left; 
}
.SearchGlass{
    margin: 30px 900px;
    float: left;
}
h2 {
    line-height: 0.8;
    font-size: 72px;
    font-weight: bold;
    color: #fff;
    width: 450px;
    padding-bottom: 42px;
    float:left; 
    text-align: left;
}
h1{
  
}

/* Class For Articles*/
.article{
    float: left;
    width: 100%;
    margin-bottom: 72px
}
.article img{
    width: 400px;
    height: 225px;
    margin-right: 1%
}
.article h1{
    float:left;
    width: 70%;
    margin: 5px 0;
    text-align: left;
    font-weight: bold;
    font-size: 22.5px;
}
.article p{
    float:left;
    width: 70%;
    margin: 5px 0;
    text-align: left;
    font-weight: bold;
    font-size: 12px;
}
footer{
    display: block;
    width: 100%;
    float: left;
}
<!DOCTYPE html>
<html lang="en-us">

<head>
    <meta charset="utf-8">
    <title>Assignment3</title>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    
    <!--[if lt IE 9]>
	    <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
        <header class="Team Sky">
          <img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
          <nav class="site-navigation">
            <ul class="clearfix navmenu">
              <li><a href="#">shop</a></li>
              <li><a href="#">checkout</a></li>
              <li><a href="#">video</a></li>
              <li> 
                <form class="search">
                    <input id="search" type="text" name="search" placeholder="search">
                </form>  
              </li>
            </ul>
          </nav>
          <div id="HeaderBike" class="HeaderBike">
            <div>
              <h1>Team Sky</h1>
              <P>the road to yellow</P>   
            </div>                    
      </div>        
 </header>

3 个答案:

答案 0 :(得分：0)

要么您没有发布解决方案所需的代码，要么您的html中有一些缩进错误。 

add_action( 'manage_shop_order_posts_custom_column' , 'custom_orders_list_column_content', 20, 2 );
function custom_orders_list_column_content( $column, $post_id )
{
    //echo $column;
    switch ( $column )
    {
        case 'drop_shipping' :
            // Get custom post meta data

            $my_var_one = get_post_meta( $post_id, 'drop_shipping', true );

            if(!empty($my_var_one))
                echo $my_var_one;

            // Testing (to be removed) - Empty value case
            else
                echo '<small>(<em>no value</em>)</small>';

          break;                        
    } 

}

答案 1 :(得分：0)

显示列表项内联块。

/*The Main Background*/

body {
  background-image: url(../img/background.png);
  background-repeat: repeat-x
}

.container {
  width: 960px;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  font-size: 100%;
  line-height: 1.5;
}

.HeaderBike {
  background-image: url(../img/HeaderBike.png);
  background-position: 260px 70px;
  background-repeat: no-repeat;
  height: 382px;
}


/* Nav Element */


/* Header Element */

.site-navigation li {
  height: 21px;
  width: 49px;
  margin-left: 35px;
  margin-right: 11px;
  float: left;
}

.site-navigation a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  float: left;
  text-align: center;
}

.site-navigation a:hover {
  padding-bottom: 2px;
  border-bottom: 1px solid white;
}


/* navmenu */

.navmenu {
  margin-top: 15px;
  width: 490px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  color: #fff;
}

.navmenu li {
display: inline-block;
}

.search {
  float: left;
}

.SearchGlass {
  margin: 30px 900px;
  float: left;
}
<!DOCTYPE html>
<html lang="en-us">

<head>
  <meta charset="utf-8">
  <title>Assignment3</title>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/styles.css">

  <!--[if lt IE 9]>
		<script src="js/html5shiv.js"></script>
	<![endif]-->
</head>

<body>
  <div class="container">
    <header class="Team Sky">
      <img src="img/TeamSkyLogo.png" alt="Team Sky Logo" style="float: left;">
      <nav class="site-navigation">
        <ul class="clearfix navmenu">
          <li><a href="#">shop</a></li>
          <li><a href="#">checkout</a></li>
          <li><a href="#">video</a></li>
          <li>
            <form class="search">
              <input id="search" type="text" name="search" placeholder="search">
            </form>
          </li>
        </ul>
      </nav>
      <div id="HeaderBike" class="HeaderBike">
        <div>
          <h1>Team Sky</h1>
          <P>the road to yellow</P>
        </div>
      </div>
    </header>

答案 2 :(得分：0)

一种简单的方法是将标题拆分为3列，然后将徽标，导航和搜索字段放入每个部分。

我在下面列举了一个例子：

＆＃13;
＆＃13; 
.clearfix {
  overflow: auto;
}

.header__section {
  float: left;
  width: 30%;
  margin-right: 5%;
}
.header__section:last-child {
  margin-right: 0;
}
＆＃13; 
<header class="header clearfix">
  <section class="header__section">
    Logo
  </section>
  <section class="header__section">
    Nav
  </section>
  <section class="header__section">
    Search
  </section>
</header>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题