在同一行上顯示項目

我試圖在左側創建一個帶有徽標的標題，菜單中有5個鏈接，然後登錄/註冊在屏幕右側，使其看起來像： -在同一行上顯示項目

Logo  Menu 1 Menu 2 Menu 3 Menu 4 Menu 5  Log In/Register

我可以讓徽標和菜單坐在一起，但登錄/註冊在下面的行中。

我使用Divs而不是表格。

body{ 
 
    \t margin:0%; 
 
\t  background:#FFC; 
 
\t  background-size:cover; 
 
    } 
 

 
    .header{ 
 
\t  background:#000; 
 
    } 
 

 
    .logo{ 
 
\t  float:left; 
 
\t  padding-right:5%; 
 
\t  margin-left:10%; 
 
\t  height:100; 
 
    } 
 

 
    /*basket*/ 
 
    .basketTray{ 
 
\t  width:40%; 
 
\t  color:white; 
 
\t  padding-top:24; 
 
\t  padding-bottom:20; 
 
\t  width:40%; 
 
    } 
 

 
    /*menu*/ 
 
    .menu{ 
 
\t  padding-top:24; 
 
\t  padding-bottom:20; 
 
\t  width:40%; 
 
\t  margin-left:15%; 
 
    } 
 

 
    .menu li{ 
 
\t  display: inline; 
 
\t  padding-right: 25px; 
 
\t  font-size: 1.3em; \t 
 
    } 
 

 
    a{ 
 
\t  text-decoration:none; 
 
\t  color:white; 
 
    }

<header class="header"> 
 
    \t <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" height="100"></div> 
 
     <!--navigation menu--> 
 
    \t \t <div class="menu"> 
 
    \t \t <ol> 
 
       <li><a href="index.php">Home</a> </li> 
 
       <li><a href="bags.php">Bags</a></li> 
 
       <li><a href="boxes.php">Boxes</a></li> 
 
       <li><a href="ingredients.php">Ingredients</a></li> 
 
       <li><a href="login.php">Log In</a></li> 
 
      \t </ol> 
 
\t \t </div> 
 
     <div class="basketTray"> 
 
      Log In| Register 
 
     </div> 
 
    </header>

來源

2015-06-02 Derek Kennedy

你必須設置display:inline-block到菜單和「日誌」

與div和有一些失誤在你的CSS中，這是一個fiddle。

body{ 
    margin:0%; 
    background:#FFC; 
    background-size:cover; 
} 

.header{ 
    background:#000; 
} 

.Logo{ 
    float:left; 
    width:20% 
    padding-right:5%; 
} 

/*basket*/ 
.basketTray{ 
    display:inline-block; 
    color:white; 
    padding-top:24px; 
    padding-bottom:20px; 
    width:40%; 
} 

/*menu*/ 
.menu{ 
    padding-top:24; 
    padding-bottom:20; 
    width:40%; 
    display:inline-block; 
} 

.menu li{ 
    display: inline; 
    padding-right: 25px; 
    font-size: 1.3em; 
} 

a{ 
    text-decoration:none; 
    color:white; 
}

來源

2015-06-02 12:40:58

非常感謝您的幫助和它的工作。 –

放置報頭（不需要一個類，可能是一個獨特的元件），其爲表單元格。

然後把div的爲表細胞：

header { 
    display: table; 
    width: 100%; 
} 
header>div { 
    display: table-cell; 
} 
header .menu ol li { 
    display: inline; 
}

DEMO

來源

2015-06-02 12:39:48 LinkinTED

`<HTML> 
<head> 
    <title>The Tao Of Chocolate</title> 
<style> 

body{ 
    margin:0%; 
    background:#FFC; 
    background-size:cover; 
} 

.header{ 
    background:#000; 
     height: 103px; 
} 

.logo{ 
    float:left; 
    padding-right:5%; 
    margin-left:10%; 
    height:100; 
} 

/*basket*/ 
.basketTray{ 
    /* width: 40%; */ 
    color: white; 
    padding-top: 22px; 
    padding-bottom: 20; 
    /* width: 40%; */ 
    float: left; 
} 

/*menu*/ 
.menu{ 
    padding-top:24; 
    padding-bottom:20; 
    width:40%; 
    margin-left:15%; 
    float: left; 
} 

.menu li{ 
    display: inline; 
    padding-right: 25px; 
    font-size: 1.3em; 
} 

a{ 
    text-decoration:none; 
    color:white; 
} 
</style> 
</head> 


<body> 
    <header class="header"> 
    <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" height="100"></div> 
    <!--navigation menu--> 
    <div class="menu"> 
     <ol> 
      <li><a href="index.php">Home</a> </li> 
      <li><a href="bags.php">Bags</a></li> 
      <li><a href="boxes.php">Boxes</a></li> 
      <li><a href="ingredients.php">Ingredients</a></li> 
      <li><a href="login.php">Log In</a></li> 
     </ol> 
    </div> 
    <div class="basketTray"> 
    <ul> 
    <li> 
     Log In| Register 
    </li> 
    </ul> 
    </div> 
</header> 



</html>' 

Try this code

來源

2015-06-02 12:47:41

你只是有你的CSS工作。首先介紹浮動：左到菜單類和籃子托盤類。然後引進一個div，它的類清除float屬性一樣

.clear{ 
     clear: both;  
    }

，並與你的填充和寬度的一些工作，你的工作就完成了。

body{ 
     margin:0%; 
     background:#FFC; 
     background-size:cover; 
    } 

    .header{ 
     background:#000; 
    } 

    .logo{ 
     float:left; 
     height:100; 
    } 

    /*basket*/ 
    .basketTray{ 

     color:white; 
     padding-top:24; 
     padding-bottom:20; 
     float:left; 
    } 

    /*menu*/ 
    .menu{ 
     padding-top:24; 
     padding-bottom:20; 
     margin-left:15%; 
     float:left; 
    } 

    .menu li{ 
     display: inline; 
     padding-right: 25px; 
     font-size: 1.3em; 
    } 

    a{ 
     text-decoration:none; 
     color:white; 
    } 
    .clear{ 
     clear: both;  
    } 


<header class="header"> 
     <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" height="100"></div> 
     <!--navigation menu--> 
     <div class="menu"> 
      <ol> 
       <li><a href="index.php">Home</a> </li> 
       <li><a href="bags.php">Bags</a></li> 
       <li><a href="boxes.php">Boxes</a></li> 
       <li><a href="ingredients.php">Ingredients</a></li> 
       <li><a href="login.php">Log In</a></li> 
      </ol> 
     </div> 
     <div class="basketTray"> 
      Log In| Register 
     </div> 
     <div class="clear"></div> 
    </header>

來源

2015-06-02 12:52:26

試試這個

body{ 
    margin:0%; 
    background:#FFC; 
    background-size:cover; 
} 

.header{ 
    background:#000; 
    width=100%; 
} 

.logo img{ 
    float:left; 
    height:80px; 
    width:200px; 
} 

/*basket*/ 
.basketTray p{ 
    float:right; 

    color:green; 

} 

.basketTray { 
    float:right; 

    color:green; 

} 

/*menu*/ 
.menu{ 

    padding:24; 

    width:40%; 
    margin-left:31%; 
} 

.menu li{ 
    display: inline; 
    padding-right: 25px; 
    font-size: 1.3em; 
} 

a{ 
    text-decoration:none; 
    color:white; 
} 



<header class="header"> 

    <div class="Logo"><img src="images/logo.jpg" alt="Company Logo" ></div> 
     <div class="basketTray"> 
     <p> Log In| Register</p> 
    </div> 
    <!--navigation menu--> 
    <div class="menu"> 
     <ol> 
      <li><a href="index.php">Home</a> </li> 
      <li><a href="bags.php">Bags</a></li> 
      <li><a href="boxes.php">Boxes</a></li> 
      <li><a href="ingredients.php">Ingredients</a></li> 
      <li><a href="login.php">Log In</a></li> 
     </ol> 
    </div> 

</header>

來源

2015-06-02 13:02:43 tinku

在同一行上顯示項目

回答

相關問題