max margin-leftを設定するにはどうすればよいですか？

レスポンシブデザインのウェブページを持っています。そのボディは最大幅：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>

出典

2016-07-18 Sophia111

いや、そこ 'MAX-margin'はありませんが、画面の解像度に応じたmediaqueriesとマージンを調整することができます。 –

メディアクエリはお友達ですhttps://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries私はできますが、実際にはHTMLのスニペットを使わずにもっと助けてください。 –

矢印を中央に配置する必要がある場合は、余白なしで行うことができ、 'transform：translate（）'関数を使って完全な中心要素を実現します。 –

がbodyにposition:relative;を追加します。その後、ウィンドウの代わりにbodyの45％のマージンになります。

例：

.arrow { 
 
    background-color: red; 
 
    width: 30px; 
 
    margin-top: -12px; 
 
    position: absolute; 
 
    /* margin-left: 45%; */ 
 
    left: 45%; /* <- why not just position left rather than using a margin? */ 
 
} 
 
html, body { 
 
    margin: 0 auto; 
 
    height: 100%; /* <-just for demo */ 
 
} 
 
body { 
 
    background-color: #ECEFF5; 
 
    font-weight: lighter; 
 
    max-width: 500px; 
 
    border: 1px solid red; /* <-just for demo */ 
 
    position: relative; /* <- make relative */ 
 
}

<div class="arrow">arrow</div>

出典

2016-07-18 13:20:30 Moob

それは美しく働いた、ありがとう！ – Sophia111

が

.arrow { 
    background-color:#ECEFF5; 
    width: 30px; 
    margin-top: -12px; 
    position: absolute; 
    margin-left: 50%; 
    left:-15px; 
    }

出典

2016-07-18 13:11:43

削除位置を中央に%50 margin-leftと- width/2左の位置にしてみてください。自動; このようなこと：

.arrow { 
    background-color:#ECEFF5; 
    width: 30px; 
    margin-top: -12px; 
    margin-left: auto; 
}

出典

2016-07-18 13:13:13 Pranjal

max margin-leftを設定するにはどうすればよいですか？

答えて

関連する問題