Question

我试图将我的四个链接浮动，以便它是直线的，一个是另一个。我对CSS很新，所以请耐心等待。我无休止地尝试了不同的职位属性但却无法实现我想要的目标。感谢

<!DOCTYPE html>
  <html>
   <head>
  <style>
    body{
         margin:  1px;
         background:green;
        }
 . topbar
      {
         background:url(topbar.gif);
         position:absolute;
         top: 5px;
         right: 15px;
         margin: 2px;
         width: 1200px;
         height: 100px;

       }

 .navbar
       {
        position:absolute;
        float:right;
        width:1200px;
        height:100px;
        border-style:groove;
        }


 a:link {text-decoration:none;color:yellow;}
 a:hover{color:red;}
#titlename
        {
        position:relative;top:10px;
        text-align:center;

        }

</style>
  </head>
    <body>

       <div class="topbar">
       </div>

         <div id="titlename">
         </div>

    <img src="title.gif" alt="title">
    </div>

     <div class="navbar">
      <div class="button"><a href="#" target="_blank">HOME</a>
      <div class="button"><a href="#" target="_blank">ABOUT</a>
      <div class="button"><a href="#" target="_blank">LINKS</a>
      <div class="button"><a href="#" target="_blank">CONTACT</a>
     </div>

   </body>
    </html>

Answer 1

有多种方法可以内联元素。

1. using Flex Method
2. using table method
3. using float method
4. using display method.

您可以在此处查看 Demo link 。包括所有可能性。

Answer 2

我不知道你是否在发布问题后已经注意到了，但是你的每个按钮DIV都缺少它关闭的DIV标签。这意味着应用的任何CSS都不会产生预期的效果。一旦修复了HTML，就可以使用以下CSS将每个导航项放在同一行上，间隔相同，菜单占据整个宽度：

.button {
    float: left;
    width: 25%;
}

如果您不希望菜单占据整个宽度，请使用填充或边距，而不是为width属性指定25％，例如：

.button {
    float: left;
    padding: 0 20px;
}

Answer 3

您可以使用float: left;或display: inline来达到您想要的效果。

<强> DEMO

只需将以下样式添加到锚标记：

.navbar a { 
    float:left; 
    margin-right: 15px;
}

Answer 4

Working Fiddle

.button{
display:inline-block;
}

我如何浮动这些元素

4 个答案: