レスポンシブデザインのウェブページを持っています。そのボディは最大幅:500ピクセルに設定されています。余白が残っている「div」の矢印:45%。画面サイズが500ピクセルを超えると、ボディは細かく固定されますが、divの余白は画面サイズの45%であるため、間違った方向に動き始めます。max margin-leftを設定するにはどうすればよいですか?
screen-sizeが増加し続けても矢印divがポイントを超えて移動しないようにmargin-leftにmaxを設定する方法はありますか?
.arrow {
background-color:#ECEFF5;
width: 30px;
margin-top: -12px;
position: absolute;
margin-left: 45%;
}
html, body {
margin: 0 auto;
}
body {
background-color: #ECEFF5;
font-weight: lighter;
max-width: 500px;
}
とHTMLは次のとおりです: CSSコードは以下の通りです、絶対マージン左ます
<body>
<div class="userdata">
<h2 style="font-weight:bold;"> First Name</h2>
<input class="input" type="text" name="firstname">
</div>
<div class="arrow">
<img src="arrow.png" style="position:absolute; width: 30px;">
</div>
<div class="instructions" id="test">
<h5>Step 1/7</h5>
<hr width="100%">
<h6 >Write your name here</h6>
<a href="xyz.html" class="button-nav" > Back </a>
</div>
いや、そこ 'MAX-margin'はありませんが、画面の解像度に応じたmediaqueriesとマージンを調整することができます。 –
メディアクエリはお友達ですhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries私はできますが、実際にはHTMLのスニペットを使わずにもっと助けてください。 –
矢印を中央に配置する必要がある場合は、余白なしで行うことができ、 'transform:translate()'関数を使って完全な中心要素を実現します。 –