Question

我目前正在学习如何建立一个网站，但我的CSS箭头在全屏幕上是完美的，但是当我减小屏幕宽度时，它会不断上下移动。我将附加链接到我的网站以及我的箭头的CSS代码。如果有人可以帮助我，我真的很感激。谢谢！请全屏打开网站，因为它尚未完全响应。链接到网站 - http://doc.gold.ac.uk/~icham002/web/index.html

<div class="arrow-down" onclick="slideDown()"></div>

Select * 
from child c 
inner join Parent P on c.id=p.id  
-- where ISNULL(p.ParentId, 0) <> 0 
where p.ParentId <> 0  -- when p.ParentId is null condition is evaluated as unknown and record are excluded.



Select * 
from child c 
-- inner join Parent P on isnull(c.Parentid,0)=p.id
inner join Parent P on (c.Parentid=p.id) OR (c.Parentid IS NULL AND p.id = 0) 

select * 
from parent 
--where isnull(Status, '') != 'Active'
where Status IS NULL OR Status <> 'Active'


-- IN THIS CASE YOU HAVE NO BENEFIT BECAUSE CONVERSIONS MAKES YOUR ARGUMENTS NOT SARGABLE!!! 
Select * 
from child c 
inner join Parent P on c.id=p.id 
where CAST(P.PostedDate AS DATE) 
      BETWEEN CAST(CASE WHEN @FromDate IS NULL THEN P.PostedDate ELSE @FromDate END) AS DATE) 
          AND CAST(@ToDate AS DATE)



SELECT * 
FROM TEMP 
--WHERE EDATE=ISNULL(@EDATE,EDATE)
WHERE EDATE=@EDATE

Answer 1

您在代码段中包含了一些不必要的CSS。这可以减少。

我在这里所做的就是使用bottom和left属性来完成箭头的定位。它使用translateX(-50%)为中心。现在这应该适用于不同大小的屏幕。

这里可以看到一个工作示例：

.arrow-down {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.arrow-down::after {
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 50%;
    border-right: 4px solid rgb(255, 0, 0);
    border-bottom: 4px solid rgb(0, 255, 0);
    -webkit-transform: rotate(45deg) translateX(-50%);
    transform: rotate(45deg) translateX(-50%);
    animation: 3s arrow infinite ease;
}

<div class="arrow-down" onclick="slideDown()"></div>

Answer 2

仅仅因为边距百分比与宽度有关，每当您更改屏幕尺寸时，您都会减小宽度，从而减少边距。相反，您可以使用top / left属性将元素放置在您想要的位置。

最好将此属性应用于父元素而不是伪元素：

.arrow-down {
  position: absolute;
  left:0;
  right:0;
  text-align: center;
  top: 49%;
  overflow: visible;
}

.arrow-down::after {
  content: "";
  width: 40px;
  height: 40px;
  position: absolute;
  border-right: 4px solid rgb(255, 0, 0);
  border-bottom: 4px solid rgb(0, 255, 0);
  -webkit-transform: rotate(45deg);
  animation: 3s arrow infinite ease;
  transform-origin:left;
}

<div class="arrow-down" onclick="slideDown()"></div>

Answer 3

尝试以px而不是％

指定值

margin-top: 49%;
margin-left: 48%;

当屏幕变小时，CSS箭头会上下移动

3 个答案: