Question

＆＃13;

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

＆＃13;

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

＆＃13;

我正在以下网站上工作： 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

在<li>中避免使用<nav>。

事实上，你使用<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标识为类。并使两个锚左右浮动（左边应该有float:left;，右边有右边浮动）。嵌套图像的另一个div也可以工作，以便使两个div浮动，避免调整图片大小（最好的办法是不调整图像大小）。

因此，将样式更改为类（如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类没有标记（嘿，你使用.header代替header，没有{{1} }}，只有<tag class="header">）等等，没有<header>来查找ul。

Answer 4

谢谢大家...我似乎已经能够通过给予正确的浮动div一个绝对位置并将其向右浮动来解决问题。垂直对齐中间在a.left上工作，但在浮动时与a.right冲突 - 改变行高有助于此 - 如果你遇到垂直对齐中间和浮动的问题尝试使用行高

请参阅以下链接了解结果： Working Link

我现在遇到的唯一问题是，当浏览器调整到530 px以下时，a.left和a.right li重叠然后放在徽标图像下...推送超出浏览器窗口的顶部。我希望徽标和a.left和a.right始终在同一条线上显示。我在不同的div上尝试过最小宽度，但无济于事。

如果在这里无法解答，我可能不得不启动一个新问题来回答这个问题。

再次感谢！

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

4 个答案: