Question

我希望这个网站的电话号码位于最后一个navitem粗略的上方我尝试过以下css

.navbar .brand .contact {
  display: block;
  font-size: 12px;
  font-weight: bold;
  font-family: 'PT Sans';
  display: block;
  min-width: 200px;
  float:right;
  margin-top: 13px;
}

但它现在也不起作用我如何将电话号码信息用于响应，以便在调整大小时浮动主题是按原样响应。

http://parkavenuelasertreatment.com/

Answer 1

从float: left

中删除.navbar .brand {}

Answer 2

我现在看到问题，而不是定位绝对（会打破响应式设计）

取<span class="contact">并将其直接放在<div class="container">

中

像这样：

<div class="container">
              <!--  =========================================  -->
              <!--  = Used for showing navigation on mobile =  -->
              <!--  =========================================  -->
            <span class="contact">
                      (212) 683 7034<br>
                      (212) 683 7757<br>
                      40 Park Avenue, Suite 5<br>
                      New York, New York, 19916<br>
            </span>

然后删除＆＃34; .navbar.brand＆＃34;来自你的CSS CSS这样：

.contact {
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    font-family: 'PT Sans';
    min-width: 200px;
    float: right;
    margin-top: 13px;
}

已在我的控制台上测试过，这应该可以解决问题了！

奖励：我建议将信息分成2个不同的跨度，以使其合适！

Answer 3

尝试

.contact {
    position: absolute;
    right: 40px;
    top: 5px;
}

css对标题的号召行动

3 个答案: