與響應標題相關的問題

我在嘗試製作標題徽標時發生了一些問題，並且鏈接發佈了我的報告，並向我發送了有關此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; 
}

在此先感謝您的幫助。

來源

2014-01-06 abk92

如果你想鏈接在同一行，你需要浮動你的標籤<a>。

嘗試：

.announce_red, .sendalerts_red { 
    float: left; 
}

PS：您需要刪除clear:both;

來源

2014-01-06 12:19:48 maurelio79

您可以添加這樣的事情你的風格：

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

來源

2014-01-06 12:44:39

你的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; 
}

來源

2014-01-06 12:54:01

與響應標題相關的問題

回答

相關問題