Question

Trying to write my first website for my new business I came across a problem that I can't work out.

I have a header with 2 <div>, 1 floated left and one right. The left-hand one contains links, while the right-hand one contains the page's title.

The problem is one of the links breaks in the middle, as you can see here:

这是我的代码：

＆＃13;

.links {
  max-width: 60%;
  float: left;
  font-size: 2.2em;
  margin: 1% 4.5%;
  clear: left;
}

.links a {
  text-decoration: none;
  color: black;
  border: 1px solid black;
  padding: 1%;
}

.links a:hover  {
  background:lightblue;
}

.FMS {
  float: right;
  margin: 0 5%;
  clear: right;
}

＆＃13;

<div>
  <nav class="links">
    <a>Home</a>
    <a>Service</a>
    <a>Contact Us</a>
  </nav>
  
  <div class="FMS">TITLE</div>
</div>

＆＃13;

Answer 1

您应该将this approach添加到这些a元素，以防止它们在空格后破坏：

#header {
  background: cyan;
  overflow: hidden;
}

.links  {
  width: 380px;
  float: left;
  font-size: 2.2em;
  margin: 1% 4.5%;
  clear: left;
}

.title {
  float: right;
  margin: 0 5%;
  clear: right;
  font-size: 2.2em;
}

.links a {
  text-decoration: none;
  color: black;
  border: 1px solid black;
  padding: 1%;
  display: inline-block;
}

.links a:hover {
  background: lightblue;
}

<header id="header">
  <nav class="links">
    <a>Home</a>
    <a>Service</a>
    <a>Contact Us</a>
  </nav>
  
  <div class="title">TITLE</div>
</header>

您也可以使用display: inline-block来执行此操作，但在inline和inline-block执行时，它们将保留block元素，这些元素不会考虑垂直边距和填充，你可以在这里看到：

#header {
  background: cyan;
  overflow: hidden;
}

.links  {
  width: 380px;
  float: left;
  font-size: 2.2em;
  margin: 1% 4.5%;
  clear: left;
}

.title {
  float: right;
  margin: 0 5%;
  clear: right;
  font-size: 2.2em;
}

.links a {
  text-decoration: none;
  color: black;
  border: 1px solid black;
  padding: 1%;
  white-space: nowrap;
}

.links a:hover {
  background: lightblue;
}

<header id="header">
  <nav class="links">
    <a>Home</a>
    <a>Service</a>
    <a>Contact Us</a>
  </nav>
  
  <div class="title">TITLE</div>
</header>

Answer 2

您可以尝试此代码

HTML

<div class="main">
  <div class="left">
   <a href="#">Home</a>
   <a href="#">A</a>
   <a href="#">B</a>
   <a href="#">C</a>
   <a href="#">D</a>
   <a href="#">E</a>
   <a href="#">F</a>
  </div>
  <div class="right">
  logo
  </div>
</div>

CSS

.main{

  width:100%;
}
.left{
  width:70%;
 float: left;
}
.right{
  width:30%;
   float: right;
}

Answer 3

您可以尝试以下CSS：

.link{
  width: 60%;
  float: left;
  font-size: 2.2em;
  margin: 1% 4.5%;
  clear: left;
}
.link a { 
 text-docoration: none;
 color: black;
 border: 1px solid black;
 padding: 1%;
}
.FMS {
 overflow:auto;
 margin: 0 5%;
 clear: right;
}

在.link div中，使用width：60％而不是max-width：60％。然后在FMS div中使用overflow：auto。溢出：自动.FMS应该使.FMS类填充剩余的可用空间。如果您希望FMS div的内容沿着右边框，则在内容而不是div上使用float：right。你也可以切换它，为FMS指定一个特定的宽度，然后使用overflow：auto作为.link div。使用此方法时，div的显示顺序可能很重要。这可能不是您正在寻找的答案，但我认为我会建议。

HTML链接<a> text wrapping breaking its border

3 个答案: