我已经将我的代码弄乱了大约两天,但我所做的一切都不起作用。我希望导航栏在两个元素 ( <img>, <form>
) 之间居中。它现在大致居中,但是当您重新调整窗口大小时,它会在 1600 像素左右变得困惑。它只需要达到 1500 像素,因为在那之后我将进入不同的导航栏位置和样式。
代码笔:http://codepen.io/anon/pen/KpECd
HTML:
<header>
<img src="../Images/Logo.svg" class="logo">
<nav>
<a href="#" class="one">SHARING</a>
<a href="#" class="two">HOSTING</a>
<a href="#" class="three">PRICING</a>
<a href="#" class="four">ACCOUNT</a>
</nav>
<form method="post" action="index.php">
<button value="SIGNUP" name="signup">SIGNUP</button>
<button value="LOGIN" name="login">LOGIN</button>
</form>
</header>
CSS:
@charset "utf-8";
header {
background-color:#464646;
height:100px;
width:100%;
}
header .logo {
max-height:44px;
max-width:535px;
margin:28px 28px 28px 28px;
}
header form {
display:inline;
float:right;
margin:28px 28px 28px 28px;
}
header form button {
height:44px;
width:125px;
border:2px solid white;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
background-color:transparent;
font-family:"Lato Black";
color:white;
font-size:22px;
}
header form button:hover {
background-color:rgba(255, 255, 255, .2);
cursor:pointer;
}
header form button:active {
background-color:rgba(255, 255, 255, .8);
}
nav {
width:47.5%;
display:inline;;
position:absolute;
text-align:center;
}
nav a {
display:inline-block;
height:100px;
width:20%;
color:white;
font-family:"Lato Black";
text-decoration:none;
font-size:16px;
line-height:100px;
}
nav a:hover {
background-color:#00a651;
cursor:pointer;
}
最佳答案
如果你有 3 个元素,你想要一个在左边,一个在右边,最后一个在其他元素中间,你可以使用这样的表格:
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;">
<tr>
<td align="left" valign="middle">
<img src="myimage.jpg" />
</td>
<td align="center" valign="middle" style="width:100%;">
<!-- width 100% will take all the spaces between the other cells -->
<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>
<a href="#" class="four">four</a>
</td>
<td align="right" valign="middle">
<form method="post" action="index.php" style="width:260px;">
<button value="SIGNUP" name="signup" style="width:120px;">SIGNUP</button>
<button value="LOGIN" name="login" style="width:120px;">LOGIN</button>
</form>
</td>
</tr>
</table>
如果你不像很多人那样喜欢表格,你可以使用带 float 的 div 和 jQuery:
winResize = function(){
var HeaderWidth = $("#header").outerWidth();
var div1Width = $("#div1").outerWidth();
var div3Width = $("#div3").outerWidth();
var div2Width = HeaderWidth - div1Width - div3Width;
$("#div2").css("width", div2Width+"px");
}
winResize();
$(window).resize(function(){
winResize();
});
关于html - 如何使我的导航栏在两个不均匀的元素之间居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26470603/