内容通过导航栏 - 引导问题

Question

我的导航栏上有一些轻微的样式问题，用我的HTML/CSS代码。

下面是它现在的样子。

这里就是我想要它看起来像：

下面是该位我的HTML代码：

<div class="page"> 
    <div class="container-fluid"> 
     <div class="col-xs-10 col-sm-3 branding"> 
      <a class="imgCon" href="{{var protoHost}}"> 
       <img alt="Coolguy" src="{{var protoHost}}img/coolguy.png"> 
      </a> 
     </div> 
     <div class="container-fluid ContactNumber col-xs-0"> 
     <p><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></p> 
     <p><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></p> 
     </div> 
     <div class="container-fluid ContactNumber"> 
     <button type="button" class="btn btn-primary">My Account</button> 
     </div> 

我的CSS：

html{ 
    position: relative; 
    width: 100%; 
    min-height: 100%; 
} 
body{ 
    font-family: "Roboto"; 
    margin-bottom: 60px; 
} 
a{ 
    color:#00A0F0; 
} 
.spacer{ 
    height:70px; 
    width: 100%; 
} 
.socialspacer { 
    height: 30px; 
} 
.AccountButton { 
    padding-left: 730px; 
} 
.smallspacer{ 
    height: 35px; 
    width: 100%; 
} 
.spacer-1{width:100%;height:10px;}.spacer-2{width:100%;height:20px;}.spacer-3{width:100%;height:30px;}.spacer-4{width:100%;height:40px;} 
.spacer-5{width:100%;height:50px;}.spacer-6{width:100%;height:60px;}.spacer-7{width:100%;height:70px;}.spacer-8{width:100%;height:80px;} 
.spacer-9{width:100%;height:90px;}.spacer-10{width:100%;height:100px;}.spacer-11{width:100%;height:110px;}.spacer-12{width:100%;height:120px;} 

.locationTitle{ 
    text-align: center; 
    font-weight: 700; 
    font-size: 2em; 
    color:#007dd1; 
    margin-bottom: 24px; 
    margin-left: 24px; 
    margin-top: 24px; 
} 
.subTitle{ 
    text-align: center; 
} 
.subHead{ 
    line-height: 1em; 
    font-size: .6em; 
} 
.navbar{ 
    height: 100px; 
    background-color: 
} 
.navbar>.container-fluid{ 
    height: 100px; 
    padding: 0; 
} 
.navbar>.container-fluid>*{ 
    height: 100px; 
} 
.navbar>.container-fluid img{ 
    height: 100px; 
} 
.branding *{ 
    display: block; 
    text-align: center; 
    color: #007dd1 
} 
.navbartext p { 
     padding-top: 17px; 
     padding-left: 172px; 
     text-align: center; 
     font-size: 17px; 
} 
.ContactNumber { 
    padding-top: 38px; 
} 
.contactspacer { 
    margin-top: 45px; 
} 
.InternetSpacer { 
    height: 45px; 
} 
.InfoSpacer { 
    margin-left: 45px; 
} 
.centerlinks { 
    text-align: center; 
} 
.navIcon{ 
    padding: 10px; 
    border-radius: 50%; 
    color:white; 
    background-color: #0071bd; 
} 
.navbar > li > a:hover{ 
    text-shadow: 0 1px 3px #CDF; 
} 
.navbar li:not(.navSep):hover{ 
    margin: 0 0 -2px 0; 
    border-bottom: 2px solid white; 
} 

.navSep{ 
    width:2px; 
    height: 40px; 
    margin: 5px 2px 5px 2px; 
    background-color: #A9AFDD; 
} 

.imgCon{ 
    max-height: 100%; 
    max-width:100%; 

} 
.imgCon img{ 
    width: auto; 
    height: auto; 
    max-width:100%; 
    max-height: 100%; 
     padding-bottom: 25px; 
} 

.page{ 
    width: 100%; 
    height: 100%; 
    padding-bottom:50px; 
} 

@media (max-width:768px){ 
    div[aria-expanded="true"] .navSep{ 
     display: none; 
    } 
} 

.mainTitle{ 
    font-size: 1.5em; 
    font-weight: 700; 
    background-color: white; 
} 

.extraInfo{ 
    background-color: #333; 
    color:white; 
    box-shadow: 1px 1px 2px 1px grey; 
    font-size: 1.2em; 
} 

.footer{ 
    background-color: #007dd1; 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 110px; 
    text-align: right; 
} 
.footer a{ 
    text-align: center; 
    height: 100%; 
    color: white; 
} 
.footer p{ 
    text-align: center; 
    height: 100%; 
    color: white; 
} 
@media (min-width : 1200px) { 
    .col-xl-0{display:none;} 

} 
@media (max-width : 1200px){ 
    .col-lg-0{display:none;} 
} 
@media (max-width : 992px){ 
    .col-md-0{display:none;} 
} 
@media (max-width : 768px){ 
    .col-sm-0{display:none;} 
} 
@media (max-width : 480px){ 
    .col-xs-0{display:none;} 
    .page { 
     padding-bottom: 160px; 
    } 
    .footer { 
     height: 160px; 
    } 
} 



@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'); 
} 
@font-face { 
    font-family: 'Roboto'; 
    font-style: normal; 
    font-weight: 700; 
    src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); 
} 

任何想法/建议将是伟大的！

Answer 1

这是由于将数据放入块级元素... <p>和<div>标签。

如果您希望联系人数据以内联方式显示，您可以给<p>一个类和它的样式以内联方式显示，或者您可以将两者放置在同一个<p>标记中。

<p class="inlineParagraph"><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></p> 
<p class="inlineParagraph"><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></p> 
<div class="clear"></div> 

.inlineParagraph { 
    float:left; 
    display:inline; 
} 
.clear { 
    clear:both; 
} 

或者......

<p><span class="contactInfo"><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></span> 
<span class="contactInfo"><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></span></p> 

和风格，你需要的任何间隔你跨越类。

至于“我的帐户”按钮，那也是有同样的问题。它在块级元素中。您可以将浮点和内联显示添加到div以更正此问题，并且会按您的需要显示。

对不起，代码概述了如何正确设置布局。我目前在我的手机上，编码在这个东西是不太理想的！如果你需要更多的指导，当我回到电脑时，我可以用代码更新我的答案。

===编辑===

这里是我的小提琴已经申请了一些更新HTML和CSS ...

<div class="page"> 
    <div class="container-fluid"> 
    <!-- id 'tempStyle' added to create artificial boundry for testing --> 
     <div id="tempStyle" class="col-xs-10 col-sm-3 branding"> 
      <a class="imgCon" href="{{var protoHost}}"> 
      Image goes here 
      <!-- <img alt="Coolguy" src="{{var protoHost}}img/coolguy.png">--> 
      </a> 
     </div> 
     <div class="container-fluid ContactNumber col-xs-0"> 
     <p class="inlineParagraph"><i class="fa fa-phone"></i><a href="tel:555-555-5555" style="color: black"> 555-555-5555</a></p> 
<p class="inlineParagraph"><i class="fa fa-envelope"><a href="info@coolguy.co" style="color: black"></i> info@coolguy.co</a></p> 
<div class="clear"></div> 
     </div> 
     <div class="container-fluid ContactNumber"> 
     <button id="myAccountBtn" type="button" class="btn btn-primary">My Account</button> 
     </div> 
     <!-- 'Clearing' floated divs to prevent breaking content further down the tree --> 
     <div class="clear"></div> 
     </div> 
    </div> 
</div> 

一些你的CSS中还修改了一下。这一切都在小提琴中，但这里是我做的一个例子：

.ContactNumber { 
    padding-top: 38px; 
    float:left; 
    display:inline; 
    width: 275px; 
} 

已添加宽度以允许在小提琴上内联显示。您可能需要根据您的具体需求进行调整。

小提琴链接：https://jsfiddle.net/vwzg7rxt/