Question

我在尝试制作标题徽标时遇到了一些问题，链接会公布我的报告，并向我发送此page尺寸所示的提醒，发送到此图片here中显示的内容。

我已经尝试在浏览器重新调整媒体查询大小时调整链接的边距和填充但我似乎无法让链接保持在同一条线上而且我似乎无法获得第一个链接宣布我的报告向左浮动，以便在重新调整大小后直接向右移动。有关如何将其缩小到移动布局的建议的任何建议吗？

HTML

<div class="row">
  <div class="col-md-12">
      <div class="logo" style="float:left"> <a href="http://www.reportalert.info/">
       <img src="images/nra/ra-logo.png" />
        </a> </div>
      <div id="utils-red" align="right"> <a class="announce_red" href="/announce">announce my report</a> <a class="sendalerts_red" href="/signup">send me alerts</a> </div>
    </div>
</div>

CSS

#utils-red
{
float:right;
margin:55px 0 0 0;
color:#fff;
font-family: 'RBNo21a-BlackDEMO';
font-size:23px;
text-decoration:none;
letter-spacing:1px;
text-align:center;
height:37px;
font-variant:small-caps;
}

a.announce_red, a.sendalerts_red
{
clear:both;
background:url(/images/nra/ra-red-action.png) left repeat-x;
background-position: 0 -35px;
padding:5px 20px;
text-decoration:none;
margin:0 0 0 20px;
outline:none;
}
a.announce_red:hover, a.sendalerts_red:hover
{
background-position:0 0;
text-decoration:none;
padding:5px 20px;
outline:none;
}

提前感谢您的帮助。

Answer 1

您可以在样式中添加以下内容：

@media only screen and (max-width: 700px) {
    #utils-red {float: none;}
    a.announce_red, a.sendalerts_red {margin: 0 20px 0 0;}
}

Answer 2

如果您想在同一行上添加链接，则还需要浮动标记<a>。

尝试：

.announce_red, .sendalerts_red {
   float: left;
}

P.S：您需要删除clear:both;

Answer 3

你的css可以改变如下

#utils-red
{
margin:55px 0 0 0;
color:#fff;
font-family: 'RBNo21a-BlackDEMO';
font-size:10px;
text-decoration:none;
letter-spacing:1px;
text-align:center;
font-variant:small-caps;
}

a.announce_red, a.sendalerts_red
{
float:left;
background:url(/images/nra/ra-red-action.png) left repeat-x;
background-position: 0 -35px;
text-decoration:none;
outline:none;
margin-left:20px;
}

a.announce_red:hover, a.sendalerts_red:hover
{
background-position:0 0;
text-decoration:none;
outline:none;
}

：）

响应头的麻烦

3 个答案: