如何保持按钮、文本和图像相对于屏幕/浏览器的大小? [英] How to keep buttons, text and images relative to a screens/browsers size?

问题描述

我正在制作一个小型网站，而且我对 CSS 非常陌生，但是每当我更改网页的大小时，我所做的一切都不会与正在显示的屏幕大小相关.例如，我在右侧有文本，如果我通过最大化右侧的文本来增加浏览器的大小，那么它会保持原位并且现在位于浏览器的中心.

I'm making a small website and I'm very new to CSS but whenever I change the size of the webpage I'm working on nothing stays relative to the size of the screen it's being displayed on. For example, I have text on the right, if I increase my browser size by maximising the text on the right stays in place and is now in the centre of the browser.

通过拖动浏览器的一角，我的一张图片随着网页大小的增加和减少而移动.我对超链接列表、文本框或文本中的图像使用相同的 CSS 代码，但它根本不起作用.

One of my images is moving with the webpage size being increased and decreased by dragging the corner of the browser. I use the same CSS code for that image on my hyperlinks list, text box or text in general and it doesn't work at all.

我研究了高低，我发现了一些东西，但似乎没有任何效果.我很沮丧，我的网站也是本地的，所以我什至无法分享链接.如果有人不明白我的意思，我会尝试重新解释，只是很难解释这个问题.

I've researched high and low, I've found some stuff on it but nothing seems to work. I'm getting so frustrated, my site is also local so I cannot even share the link. If anyone doesn't understand what I mean I'll try re-explain it's just quite hard to explain the issue.

适用于图像的代码:

img {
    padding-top:50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

另外，我想将超链接移到左上角，如果这有所不同，则不要自动分配它们，而且我也无法触摸 HTML 代码，只能触摸 CSS.(我正在做一个 CSS 测试，看看我是否能够复制已经完成的网页的图像.我不是作为课程作业或大学/大学测试的一部分来做这个的，我是一名学生，但我我正在实习，担任软件工程师，这是我自学的兼职作业.

Also, I want to move the hyperlinks to the top left, not have them auto assigned if that makes a difference and I cannot touch the HTML code either, just the CSS. (I'm doing a CSS test to see if I'm able to replicate an image of a webpage already done. I'm not doing this as part of coursework or a test at college/uni, I'm a student but I'm on work placement as a software engineer, this is part time homework for me to self-learn).

推荐答案

可以使用百分比表示法

例如:

img {
  padding-top:50px;
  display: block;
  margin-left: 10%;
}

这篇关于如何保持按钮、文本和图像相对于屏幕/浏览器的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！