如何设置最大左边距？

debugcn 发表于 Dev

索菲亚111

我有一个响应式设计的网页，其主体设置为max-width：500px；还有一个div“箭头”，其左边距为：45％。当屏幕尺寸超过500px时，主体保持良好且固定，但是由于div箭头的左边距为屏幕尺寸的45％，因此它开始向错误的方向移动。

有没有一种方法可以在左边距上设置最大值，以使即使屏幕尺寸不断增加，箭头div也不会超出一个点？CSS代码如下：

.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是：

<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>

笨蛋

添加position:relative;到中body。然后，边距将是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 */
}