我正在尝试在中间创建一个带有徽标的导航栏,导航栏项目彼此之间的距离相同。像这样:
但是,我在使导航栏响应时遇到问题。从截图中可以看出,徽标和链接之间的距离并不相等。
header {
width: 100%;
margin: 0 auto;
}
#logo {
text-align: center;
}
.nav {
text-align: center;
}
.nav li {
display: inline;
margin-left: 7em;
margin-right: 7em;
}
/* use media query to change the layout */
@media (min-width: 768px) {
body {
background-color: #f2f2f2;
}
.nav {
margin-top: -42px;
}
.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}
.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<header>
<div class="container">
<h2 id="logo">Logo</h2>
<ul class="nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
</header>
答案 0 :(得分:4)
您可以使用flexbox,查看flexbox here
的基础知识我已更新您的代码以使用flexbox。
我已将徽标移至 <header>
<div class="container">
<ul class="nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><h2 id="logo">logo</h2></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
</header>
元素。
.nav
我已将您的CSS更新为使用flexbox,请注意display:flex
现在有 header {
width: 100%;
}
#logo {
text-align: center;
margin-top:0;
}
.nav {
text-align: center;
display:flex;
}
.nav li {
flex: 1;
display: inline;
}
/* use media query to change the layout */
@media (min-width: 768px) {
body {
background-color: #f2f2f2;
}
.nav {
}
.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}
.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
。
public function editchecksave(Request $request)
{
$id = $request->id;
$username = $request->username;
$attribute = $request->attribute;
$value = $request->value;
$op = $request->op;
$result = DB::update('update radcheck set username = "?" ,
attribute="?",value="?" ,op="?" where id = ?',
[$username,$attribute,$value,$op,$id]
);
if ($result)
{
return response()->json([ 'msg' => 'Updated Successfully' . $username]);
}
return response()->json([ 'msg' => 'Not Updated Successfully'. $value]);
}
这应该足以让你前进。继承人codepen
答案 1 :(得分:0)
更新了以下CSS并在ul
中保留了标题 header {
width: 100%;
margin: 0 auto;
}
.nav {
text-align: center;
display: flex;
justify-content: space-between;
}
.nav li {
display: inline;
}
h2 {
margin-top: 0;
}
header {
width: 100%;
margin: 0 auto;
}
.nav {
text-align: center;
display: flex;
justify-content: space-between;
}
.nav li {
display: inline;
}
h2 {
margin-top: 0;
}
/* use media query to change the layout */
@media (min-width: 768px) {
body {
background-color: #f2f2f2;
}
.nav li:nth-child(1), .nav li:nth-child(2) {
float: none;
}
.nav li:nth-child(3), .nav li:nth-child(4) {
float: none;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
&#13;
<header>
<div class="container">
<ul class="nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><h2 id="logo">Logo</h2></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</div>
</header>
&#13;
答案 2 :(得分:0)
您也可以使用flex-box
;
grid
.header {
width: 100%;
}
.container {
width: 75%;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.container div {
grid-column: auto / span 1;
text-align: center;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}
<header class="header">
<div class="container">
<div><a href="#">Work</a></div>
<div><a href="#">About</a></div>
<div><h2 id="logo">Logo</h2></div>
<div><a href="#">Contact</a></div>
<div><a href="#">Social</a></div>
</div>
</header>
现在,如何设置标题的宽度并不重要,所有项目都保持相同的宽度。
答案 3 :(得分:0)
这里有一个简单的例子,使用 position:absolute 来标识徽标:
这是HTML
<header>
<h2 id="logo">Logo</h2>
<ul class="nav">
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Social</a></li>
</ul>
</header>
这里是CSS
* { /*Replace this to enable margin and padding*/
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 70px;
position: relative;
}
#logo {
position: absolute;
text-align: center;
width: 100%;
height: 70px;
line-height: 70px;
top: 0;
left: 0;
}
.nav {
width: 100%;
height: 70px;
}
.nav li {
width: 25%;
float: left;
box-sizing: border-box;
text-align: center;
list-style: none;
line-height: 70px;
}
如果徽标是图像(正如我想的那样),你可以使用这个小技巧:
#logo {
position: absolute;
top: 50%;
left: 50%;
margin-top: -20px; /*If logo height is 40px*/
margin-left: -30px; /*If logo width is 60px*/
}
如您所见,我使用顶部和左侧将徽标放在中间,然后将图像宽度和高度的一半放在边缘顶部和边距左侧。
以下是您的徽标是图片的示例:https://codepen.io/Nacorga/pen/yEXaQO