/* Importing Amaranth Font for menu text */
@import url(http://fonts.googleapis.com/css?family=Amaranth);
header,
a,
img,
li {
transition: all 1s;
-moz-transition: all 1s;
/* Firefox 4 */
-webkit-transition: all 1s;
/* Safari and Chrome */
-o-transition: all 1s;
/* Opera */
color: white!important;
}
/* Basic layout */
body {
background-color: #ebebeb;
}
ul {
list-style-type: none none none!important;
display: inline-block;
vertical-align: middle;
}
li {
display: inline;
}
img.logo {
width: 200px;
margin-left: 10px;
padding-right: 10px;
}
nav {
width: 100%;
top: 50%;
transform: translateY(-50%);
position: relative;
line-height: 100px;
}
.header ul li {
display: inline-block;
vertical-align: middle;
text-transform: uppercase;
margin-left: 35px;
letter-spacing: 3px;
}
section.stretch {
float: left;
height: 1500px;
width: 100%;
}
section.stretch p {
font-family: 'Amaranth', sans-serif;
font-size: 30px;
color: #969696;
text-align: center;
position: relative;
margin-top: 250px;
}
section.stretch p.bottom {
top: 100%;
}
header {
background: black;
border-bottom: 1px solid #aaaaaa;
float: left;
width: 100%;
position: fixed;
z-index: 10;
background: #7f7f7f;
background: rgba(0, 0, 0, 0.5);
}
header a {
color: #969696;
text-decoration: none;
font-family: 'Amaranth', sans-serif;
text-transform: uppercase;
}
header a.active,
header a:hover {
color: #3d3d3d;
}
header li {
margin-right: 30px;
}
/* Sizes for the bigger menu */
header.large {
height: 220px;
}
header.large img {
width: 200px;
height: 200px;
margin-top: 10px;
}
header.large li {
margin-top: 15px;
}
/* Sizes for the smaller menu */
header.small {
height: 90px;
}
header.small img {
width: 85px;
height: 85px;
margin-top: 5px;
}
header.small li {
margin-top: 2px;
}
header.small.left {
color: yellow!important;
margin-top: 48px;
}
a.left {
color: white!important;
margin-top: 98px;
}
a.right {
margin-left: 75%;
color: white!important;
margin-top: 98px;
}
<header class="large">
<nav>
<img class="logo" src="img/header_left.jpg" />
<li><a class="left" href="#">Michael Beiruit</a><a class="right" href="#">Thames & Hudson</a>
</li>
</nav>
</header>
我正在以下网站上工作: http://gregorydanelian.comule.com/ken/
我希望文本左右浮动,但在浏览器上调整大小后文本被截断为不同的行。
如何防止浏览器调整大小将文本截断到不同的行?
最佳答案
首先你应该把你的 li
标签放在 ul
标签里
<ul>
<li> First </li>
<li> Second </li>
<li> Third </li>
</ul>
然后减少你的两个 a
关于html - 如何在缩放标题中垂直对齐和 float 两个文本框(左和右),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34815994/