HTML/CSS定位元素

Question

我试图做到这一点：

和我看起来是这样的：

不是最美丽的东西。 我的问题是：

1. 我们有一个标题，搜索栏，菜单和一个按钮。我如何将它们全部内嵌？
2. 在与背景图像的div - 我怎么能像原始网站那样定位标题？

Answer 1

1）看看Navbar component文档。如果实施正确，项目应该已经内联。您可以使用导航栏左侧和导航栏右侧的类来定位导航栏中的项目。

2）您会注意到大型中心文本始于与导航栏徽标相同的位置。这是因为容器类。我建议你分析一下examples看看如何正确实现容器。

之后，如果您仍在努力将styles.css添加到您的pastebin文章或更好地创建Codepen - 这将允许某人更有帮助。

Answer 2

1-你可以写float：left;或浮动：正确; ？寻找这个float

2的位置，你必须创建一个相对的div后里面建立绝对的div ..一个元素，你可以指定结算与右上底部坐标左..看看这里position

Answer 3

我要说浮动不是很好的练习用法。除非你真的没有选择使用。

但基于我如何看待它。 使用flex可以实现。

放一个显示器：flex在你的主div上 然后至于你的其他元素。使用显示器：flex-grow

使用flex是有利的。 ，不仅能解决你的问题。它使您的网站反应灵敏。

干杯

Answer 4

[![if you need all navigation item in one line. you have to make display:inline-block,for navigation. 

change your code to: 

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap"> 
       <ul class="pull-left"><li><a href="#" class="logo"></a></li> 
       </ul> 
       <ul class="pull-left">     
        <li class="formSearch"> 
         <input type="text" placeholder="Find Freelancers" id="searchButton"> 
        </li>    
        <li><a href="#">Browse</a></li> 
        <li><a href="#">How it works</a></li> 
       </ul> 
       <ul class="pull-right"> 
        <li> 
         <a href="#" class="signupHover"> 
          <span class="icon signup"></span> 
          <a href="#">Sign Up 
          </a> 
         </a> 
        </li> 
        <li> 
         <a href="#" class="loginHover"> 
          <span class="icon login"></span> 
          <a href="#">Login</a> 
         </a> 
        </li> 
       </ul> 
       <button type="button" id="buttonHeader">Become a freelancer</button> 
      </div> 

/*add below css*/ 

.nav-wrap ul li{display:inline-block;}][1]][1]