我正致力于创建自定义标头。我不确定如何在我的标题中正确完美地内联我的元素。例如,这些元素应该是红色箭头指向的位置:
如何在标题中获取这些元素,将它们完美对齐,并将它们放在红色箭头指向的位置(上图)。
https://jsfiddle.net/af5caL8p/3/
body {
margin: 0;
}
.header {
height: 45px;
width: 100%;
background-color: royalblue;
color: white;
padding: 10px;
margin-top: auto;
margin-bottom: auto;
line-height: 11px;
display: inline-block;
}
button.signup {
background-color: #2FA034;
border-radius: 10px;
color: white;
font-size: 20px;
font-weight: 300;
}
/* Material style */
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: royalblue;
/* Ripple magic */
position: relative;
overflow: hidden;
}

<div class="header">
<h1>Logo</h1>
<a href="#">Link 1</a>
<button class="signup">Signup</button>
<button class="signup">Login</button>
</div>
&#13;
答案 0 :(得分:0)
withSchema("test_project")
。我更新了你的JS示例:https://jsfiddle.net/af5caL8p/4
答案 1 :(得分:0)
display: inline-block
显示只是使用块/内联默认属性的元素使用额外的属性,例如默认情况下<span>
是内联元素,并且只能使用填充而不是边距。
使其显示内联块允许它使用适用于块元素的属性,例如带边距的段落。
body {
margin: 0;
}
.header {
height: 45px;
width: 100%;
background-color: royalblue;
color: white;
padding: 10px;
margin-top: auto;
margin-bottom: auto;
line-height: 11px;
/*use flex instead of display: inline-block; explanation is above*/
display: flex;
}
button.signup {
background-color: #2FA034;
border-radius: 10px;
color: white;
font-size: 20px;
font-weight: 300;
}
/* Material style */
button {
border: none;
cursor: pointer;
color: black;
width: 130px;
padding: 10px;
border-radius: 2px;
font-size: 19px;
background: royalblue;
/* Ripple magic */
position: relative;
overflow: hidden;
}
&#13;
<div class="header">
<h1>Logo</h1>
<a href="#">Link 1</a>
<button class="signup">Signup</button>
<button class="signup">Login</button>
</div>
&#13;