gpt4 book ai didi

html - 将所有导航项置于内联

转载 作者:行者123 更新时间:2023-11-28 01:06:26 25 4
gpt4 key购买 nike

网页截图:
Webpage Screenshot

/* All */
html {
font-family: 'Work Sans', sans-serif;
margin: 0 auto;
background-image: url("Assets/Background_Image.jpg");
color: white;
}


/*Navbar */
.navbar {
background-color: #f0f0f0;
width: 100%;
float: top;
margin: 0 auto;
border: 2px solid gray;
border-radius: 3px;
}

.nav_align {
list-style-type: none;
display: inline;
}

.nav_logo {
background-color: #f0f0f0;
border: 2px solid #f0f0f0;
border-radius: 5px;
margin: 0;
padding: 0;
}

.nav_title {
color: gray;
background-color: aqua;
padding: 3px;
}

.Main_Logo {
width: 150px;
height: 150px;

}

.nav_sm {
}


.sm_list {
}

.sm_item img {
width: 30px;
height: 30px;
float: top;
border-radius: 5px;
}

.nav_search {

}

.nav_btns {

}

.nav_list {

}

.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
display: inline-block;
}

.nav_btn:hover {
background-color: #1E40FF;
color: white;
padding: 7px;
}
.navbar a:hover {
color: white;
}

/*Navbar End */
<?php 

require_once "Includes/db-Connect.php";

//session data will be here

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="Stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<title>Game Informer - Home</title>

<nav class="navbar">
<ul class="nav_align">

<li class="nav_align">
<div class="nav_logo">
<img src="Assets/Main_Logo.png" alt="Main_Logo" class="Main_Logo">
</div>
</li>

<li class="nav_align">
<div class="nav_title">
<h1>Game Informant</h1>
</div>
</li>

<li class="nav_align">
<div class="nav_sm">
<ul class="sm_list">

<li class="sm_item"><a href="https://www.youtube.com/?gl=GB&hl=en-GB">
<img src="Assets/YT_Logo.png" alt="youtube"></a></li>

<li class="sm_item"><a href="https://www.facebook.com/">
<img src="Assets/FB_Logo.png" alt="facebook"></a></li>

<li class="sm_item"><a href="https://twitter.com/Twitter">
<img src="Assets/TW_Logo.png" alt="twitter"></a></li>

</ul>
</div>
</li>

<li class="nav_align">
<form class="nav_search">
<input type="search" name="search" placeholder="Non-Function">
<input type="Submit" value="Submit">
</form>
</li>

<li class="nav_align">
<div class="nav_btns">
<ul class="nav_align">
<li class="nav_btn"><a href="index.php">Home</a></li>
<li class="nav_btn"><a href="questions.php">Questions</a></li>
<li class="nav_btn"><a href="account.php">Account</a></li>
<li class="nav_btn"><a href="contact.php">Contact</a></li>
</ul>
</div>
</li>

</ul>
</nav>



</head>

<hr>

<body>

<br>
<br>
<br>
<br>

<?php
require_once "Includes/db-Connect.php";
?>

<div class="sign_con">

<button class="sign_button"><a href="Sign_In.php">Sign In</a></button>
<button class="sign_button"><a href="Sign_Up.php">Sign Up</a></button>

</div>


</body>
</html>

我是一名计算机科学专业的学生,​​我需要一些帮助,但我无法将所有导航元素内联。我是这方面的初学者,因为这似乎是 2 分钟的修复,但我已经尝试了大约一个小时,所以我一无所知。

最佳答案

添加下面的CSS..

.sm_list {
list-style:none;
}
.sm_list > li {
display: inline;
}

/* All */
html {
font-family: 'Work Sans', sans-serif;
margin: 0 auto;
background-image: url("Assets/Background_Image.jpg");
color: white;
}


/*Navbar */
.navbar {
background-color: #f0f0f0;
width: 100%;
float: top;
margin: 0 auto;
border: 2px solid gray;
border-radius: 3px;
}

.nav_align {
list-style-type: none;
display: inline;
}

.nav_logo {
background-color: #f0f0f0;
border: 2px solid #f0f0f0;
border-radius: 5px;
margin: 0;
padding: 0;
}

.nav_title {
color: gray;
background-color: aqua;
padding: 3px;
}

.Main_Logo {
width: 150px;
height: 150px;

}

.nav_sm {
}


.sm_list {
list-style:none;
}
.sm_list > li {
display: inline;
}
.sm_item img {
width: 30px;
height: 30px;
float: top;
border-radius: 5px;
}

.nav_search {

}

.nav_btns {

}

.nav_list {

}

.nav_btn {
text-decoration: none;
padding: 5px;
background-color:#DCDCDC;
color: white;
border-radius: 5px;
list-style-type: none;
display: inline-block;
}

.nav_btn:hover {
background-color: #1E40FF;
color: white;
padding: 7px;
}
.navbar a:hover {
color: white;
}

/*Navbar End */
<?php 

require_once "Includes/db-Connect.php";

//session data will be here

?>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="Stylesheet" type="text/css" href="Stylesheet.css">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">

<title>Game Informer - Home</title>

<nav class="navbar">
<ul class="nav_align">

<li class="nav_align">
<div class="nav_logo">
<img src="Assets/Main_Logo.png" alt="Main_Logo" class="Main_Logo">
</div>
</li>

<li class="nav_align">
<div class="nav_title">
<h1>Game Informant</h1>
</div>
</li>

<li class="nav_align">
<div class="nav_sm">
<ul class="sm_list">

<li class="sm_item"><a href="https://www.youtube.com/?gl=GB&hl=en-GB">
<img src="Assets/YT_Logo.png" alt="youtube"></a></li>

<li class="sm_item"><a href="https://www.facebook.com/">
<img src="Assets/FB_Logo.png" alt="facebook"></a></li>

<li class="sm_item"><a href="https://twitter.com/Twitter">
<img src="Assets/TW_Logo.png" alt="twitter"></a></li>

</ul>
</div>
</li>

<li class="nav_align">
<form class="nav_search">
<input type="search" name="search" placeholder="Non-Function">
<input type="Submit" value="Submit">
</form>
</li>

<li class="nav_align">
<div class="nav_btns">
<ul class="nav_align">
<li class="nav_btn"><a href="index.php">Home</a></li>
<li class="nav_btn"><a href="questions.php">Questions</a></li>
<li class="nav_btn"><a href="account.php">Account</a></li>
<li class="nav_btn"><a href="contact.php">Contact</a></li>
</ul>
</div>
</li>

</ul>
</nav>



</head>

<hr>

<body>

<br>
<br>
<br>
<br>

<?php
require_once "Includes/db-Connect.php";
?>

<div class="sign_con">

<button class="sign_button"><a href="Sign_In.php">Sign In</a></button>
<button class="sign_button"><a href="Sign_Up.php">Sign Up</a></button>

</div>


</body>
</html>

关于html - 将所有导航项置于内联,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52335842/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com