如何在缩放时垂直对齐和浮动两个文本框（左和右）header

Question

/* 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/

我希望文本左右浮动，但在浏览器调整大小时，文本被截断为不同的行。

如何防止浏览器调整大小将文本截断到不同的行？

Answer 1

首先，您应该将 li 标签放在 ul 标签内

<ul>
    <li> First </li>
    <li> Second </li>
    <li> Third </li>
</ul>

然后减少两者之间的差值 a

Answer 2

进行这些更改（已更新）

HTML

<nav>
   <div class="left">
    <img class="logo" src="img/header_left.jpg">
  </div>
  <div class="right">
    <ul>
       <li class="lefttext"><a href="#">Michael Beiruit</a></li>
       <li class="righttext"><a href="#">Thames &amp; Hudson</a></li>
    </ul>
</nav>

CSS

nav{ display: inline; height:200; background-color:black; width:100%;}

nav ul{
    padding: 0;
    margin: 0 0 10px 25px;
    width: 100%;
   display:inline;
}

nav li{
    display: inline-block;

}

li.lefttext{
  float:left;
}

li.righttext{
  float:right;
}

.left {
   float:left;
   width:30%;
}

.right{
   float:right;
   width:70%;
}

FIDDLE

Answer 3

在 <nav> 中避免 <li>。

事实上，您会使用 <div> 来固定锚点。

<header class="large">
        <nav>
    <div style="
    width: 24%;
    height: 100%;
    margin-top: 220px;">
      <img class="logo" src="img/header_left.jpg"></div>

            <div style="
    float: right;
    width: 75%;">
                <a class="left" href="#">Micahel Beiruit</a>
                <a class="right" href="#">Thames &amp; Hudson</a>
  </div>
        </nav>
    </header>

仅更改样式属性（不好的做法，我曾使用过它，因为使用 Chrome 检查元素 进行实时更改，它将值存储在标签中本身），将两个 div 识别为 classes。并使两个锚点分别向左和向右浮动（左边应该有 float:left;，所以从右到右浮动）。另一个嵌套图像的 div 也可以工作，以使两个 div 浮动以避免调整图片大小（最好不要调整图像大小）。

所以，将样式更改为class（如class="logo"和class="names"），然后样式将存储在.logo{ width:24%; height:100%;/\* optional \*/ margin-top:220px; /\* or you'd better use absolute and relative positioning \*/ } 和 .names{ float:right;width:75%; /\* or another percentage \*/ }.

此外，这个CSS还有一些缺陷。 .header ul li 会失败，因为首先，没有带有 header class 的标签（嘿，你使用的是 .header 而不是 header，有没有 <tag class="header">，只有一个 <header>)，还有更多，没有 ul 可以寻找一些 li.

Answer 4

谢谢大家...我似乎已经能够通过给正确的浮动 div 一个绝对位置并使其正确浮动来解决这个问题。 vertical-align 中间在 a.left 上工作但与 a.right 冲突，因为它是浮动的 - 更改 line-height 对此有所帮助 - 如果你在 vertical-align 上遇到问题middle 和 floats 尝试使用 line-height.

查看下面的 link 结果： Working Link

我现在遇到的唯一问题是，当浏览器的大小调整到 530 像素以下时，a.left 和 a.right li 重叠，然后落在徽标图像下方...将其推到浏览器顶部 window。我希望徽标以及 a.left 和 a.right 始终显示在同一行上。我在不同的 div 上尝试过 min-width，但无济于事。

如果这里无法回答，我可能不得不开始一个新问题来回答这个问题。

再次感谢！

如何在缩放时垂直对齐和浮动两个文本框（左和右）header

How to vertically align and float two text boxes (left and right) in scaling header

html

css

css-float

vertical-alignment

scaling