Question

我有一个响应式设计的网页，我的身体设置为最大宽度：500px;还有一个div'箭头'，其边距为：45％。当屏幕尺寸超过500px时，机身保持正常并固定，但由于div箭头的左边距是屏幕尺寸的45％，因此它开始向错误的方向移动。

有没有办法在margin-left上设置max，这样即使屏幕大小不断增加，箭头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>

Answer 1

尝试将%50 margin-left和- width/2左侧位置置于中心

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

Answer 2

删除位置：绝对并使边距左：自动; 这样：

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

Answer 3

将position:relative;添加到body。然后边距将是body的45％，而不是窗口。

例如：

＆＃13;

.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 */
}

＆＃13;

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

＆＃13;

如何设置最大边距 - 左？

3 个答案: