在創建導航欄時，我無法將“聯系人”放在“家”之后，而只能放在它下面。有人幫忙。這是我在 css 檔案中寫的內容。'contact' 和 'home' 都是 ul 標簽下的專案。
*{
margin: 0px ;
padding: 0px ;
}
body{
background: url('bat.jpg')
}
.main{
background:rgba(0, 0, 0, 0.5) ;
width: 200px ;
position: relative ;
top: 100px ;
left: 30% ;
padding: 20px ;
border-radius: 7px ;
}
h1{
text-align: center ;
}
#submit{
position: relative;
left: 30% ;
padding: 2px ;
font-size: 15px ;
font-family: Arial, Helvetica, sans-serif ;
}
.Navbar{
background: black ;
height: 50px ;
width: 100% ;
}
.nav{
float: right ;
}
.page{
text-decoration: none ;
display: inline-block ;
color: white ;
}
.table{
list-style: none ;
padding: 0;
margin: 0 ;
}
這是我用html寫的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Navbar">
<nav class="nav">
<ul class='table'>
<li><a href='#' class='page'>Home</a></li>
<li><a href='#' class="page">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
這是我得到的結果，其中聯系人位于導航欄中的家下方。它出現在右上角
uj5u.com熱心網友回復：
這是一種以行內方式顯示串列的簡單方法...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<style>
*{
margin: 0px ;
padding: 0px ;
}
body{
background: url('bat.jpg')
}
.main{
background:rgba(0, 0, 0, 0.5) ;
width: 200px ;
position: relative ;
top: 100px ;
left: 30% ;
padding: 20px ;
border-radius: 7px ;
}
h1{
text-align: center ;
}
#submit{
position: relative;
left: 30% ;
padding: 2px ;
font-size: 15px ;
font-family: Arial, Helvetica, sans-serif ;
}
.Navbar{
background: black ;
height: 50px ;
width: 100% ;
}
.page{
text-decoration: none ;
display: inline-block ;
color: white ;
}
.table{
list-style: none ;
padding: 0;
margin: 0 ;
}
ul{
text-align: right;
}
.page{
padding: 10px;
}
li{
display:inline;
}
</style>
<body>
<div class="Navbar">
<nav class="nav">
<ul class='table'>
<li><a href='#' class='page'>Home</a></li>
<li><a href='#' class="page">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>
uj5u.com熱心網友回復：
試試這個：
ul li {
display: inline-block ;
}
.page{
text-decoration: none ;
display: block ;
color: white ;
}
uj5u.com熱心網友回復：
使用display: flex在類表。洗掉類頁面的行內塊，因為一旦我們display: flex在父頁面上使用它就沒有必要了。有關更多資訊，請閱讀本教程 - MDN 上的 Flexbox 基礎知識
.table{
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.page{
text-decoration: none;
color: white;
}
uj5u.com熱心網友回復：
您可以將 CSS 添加display:flex;到類中.table。您還可以通過添加邊距來自定義所有導航欄專案的空間li > a
* {
margin: 0px;
padding: 0px;
}
body {
background: url("bat.jpg");
}
.main {
background: rgba(0, 0, 0, 0.5);
width: 200px;
position: relative;
top: 100px;
left: 30%;
padding: 20px;
border-radius: 7px;
}
h1 {
text-align: center;
}
#submit {
position: relative;
left: 30%;
padding: 2px;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
}
.Navbar {
background: black;
height: 50px;
width: 100%;
}
.nav {
float: right;
}
.page {
text-decoration: none;
display: inline-block;
color: white;
}
.table {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
li>a {
margin: 5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Form</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="Navbar">
<nav class="nav">
<ul class="table">
<li><a href="#" class="page">Home</a></li>
<li><a href="#" class="page">Contact</a></li>
</ul>
</nav>
</div>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/398090.html