使文本粘到div的右邊

我正在響應網站上工作，並遇到菜單文本的小問題。我想要它做的是堅持其右邊緣，同時縮小寬度。當寬度低於1000px時，div和文本所在的容器會與網站一起縮放。不幸的是，我似乎無法找到一個體面的CSS命令來實現這一點。我的HTML：使文本粘到div的右邊

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> 
    <title>Żaglówki!</title> 

    <!-- Bootstrap --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
    <link href="style.css" rel="stylesheet"> 
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> 
     <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> 
    <![endif]--> 

     <!-- 

      COLOR SHEME: 
      000c14 
      008ee8 
      0aa1ff 
      5fb2e8 
      6fc7ff --> 



    </head> 
    <body> 
     <div id="container"> 
     <div class="hpanel"></div> 
     <div id="MainPhotoMenu" style="background-image: url(image/bg1.jpg);"> 
      <h1 id="name">SUPER ŻAGLÓWKI!!</h1> 
      <ul> 
      <li><a href="#" class="menulink">O Nas</a></li> 
      <li><a href="#" class="menulink">Eventy</a></li> 
       </ul> 
      </div> 
     <div class="hpanel"></div> 



     </div> 










    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.min.js"></script> 
    </body> 
</html>

和CSS：

body{font-family: 'Droid Serif', serif;} 

#container{ 
width: 1000px; 
height: 1300px; 
margin: auto; 
    box-shadow: 4px 4px 20px #9b9b9b; 
    background-color: #5fb2e8; 
} 

#container:before{ 
background-image: url(image/ELM2.jpg); 
    display:block; 
position: absolute; 
    width:100%; 
    height:100%; 
    z-index:-1; 
} 

.hpanel{ 
    display:block; 
    width: 100%; 
    height: 20px; 
    background-color: #0aa1ff; 
    box-shadow: 5px 1px 9px #9b9b9b; 
} 

#MainPhotoMenu{ 
    position:relative; 
width:100%; 
height:220px; 
background-position: bottom; 
background-attachment: fixed; 
    background-size: cover; 
    box-shadow: inset 1px 1px 120px; 
    background-repeat: no-repeat; 
    text-align: right; 
} 

#name{ 
color:#52a3d9; 
    position:absolute; 
    top: 145px; 
    font-size: 60px; 
    text-shadow: 1px 1px 10px #000c14; 

} 

.menulink{ 
color:white; 
position:relative; 
top: 50px; 
left: 30px; 
font-size: 40px; 
    text-shadow: 1px 1px 15px #000c14; 
    vertical-align: middle; 


} 




@media only screen and (max-width: 1000px) { 
    #body { 
     width: 100%; 
    } 
} 

@media only screen and (max-width: 580px) { 
    #name { 
     top:175px; 
     font-size:2em; 
    } 
} 

div { 
    @include box-sizing(border-box); 
}

將是任何幫助

來源

2015-09-28 aln447

請，包括** **最小示例重現您的問題。 http://stackoverflow.com/help/mcve。現在它是一種TL \ DR。在談論文本時，您可以簡單地使用'text-align' CSS屬性來對齊文本。 –

爲什麼人們在論壇上發帖之前學習基礎知識..瞭解地面情況，每次改變內容時都不需要幫助。Google是您最好的朋友... – Mayhem

我試過谷歌Mayhem。來這裏通常是我的計劃Z如果一切都失敗 – aln447

解決方案1感激：

你爲什麼不改變「容器」的寬度到100％，如果你需要div作爲響應分辨率小於1000px

@media only screen and (max-width: 1000px) { 
#body { 
    width: 100%; 
}#container{width:100%}

}

解決方案2：

你需要改變「容器」寬度最大寬度

#container{max-width: 1000px;height: 1300px;margin: auto;box-shadow: 4px 4px 20px #9b9b9b;background-color: #5fb2e8;

}

來源

2015-09-28 09:24:22

解決方案2實際上工作。謝謝 – aln447

使文本粘到div的右邊

回答

相關問題