网站放大缩小扭曲内容答案

【问题标题】：Website zoom-in zoom-out distorts the content网站放大缩小扭曲内容
【发布时间】：2015-03-09 00:22:13
【问题描述】：

我是 UI 设计的新手，我正在尝试创建一个选项卡式布局。

所有的选项卡都在中心顶部，然后有两个 div 相互放在一起：

蓝色分区
红色分区

问题在于放大和缩小。

缩小会使所有选项卡错位（选项卡 F 移动到另一行）。
与放大相同的问题：内容移动到远离其原始位置的其他位置

我只是希望缩放与图像缩放相同。内容不应移动到任何地方。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
body,html {
	height: 100%;
}

div.tabcontents {
	padding: 1%;
	background-color: black;
	color: white;
	height: 80%;
	background-color: blue;
	margin-left: 10%;
	margin-right: 10%;
}

ul.tabs {
	padding: 1% 0;
	font-size: 0;
	margin: 0;
	list-style-type: none;
	text-align: right;
}

ul.tabs li {
	display: inline;
	margin: 0;
	margin-right: 1%; /*distance between tabs*/
	font: normal 14px Verdana;
	padding: 0.5% 4%;
	border: 1px solid white;
	border-bottom-color: black;
	color: white;
}

ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab {
	background: black;
	color: white;
}

ul.tabs li a {
	text-decoration: none;
	color: white;
}
</style>
</head>
<body bgcolor="black">
	
		<ul class="tabs" style="margin-right: 19%">
			<li id="admin" class="activeTab"><a>tabA</a></li>
			<li id="admin" class="activeTab"><a>tabB</a></li>
			<li id="admin" class="activeTab"><a>tabC</a></li>
			<li id="admin" class="activeTab"><a>tabD</a></li>
			<li id="admin" class="activeTab"><a>tabE</a></li>
			<li id="admin" class="activeTab"><a>tabF</a></li>

		</ul>
		<div class="tabcontents">
			<div style="height: 100%; background-color: red"></div>
		</div>
	
</body>
</html>

【问题讨论】：

你为什么用百分比来表示all值？这必然会导致问题。
即使我以像素为单位更改填充和边距，问题也是一样的。我只想要与 stackoverflow 网站类似的 zoomin zoomout 支持。放大和缩小永远不会在任何地方移动内容（仅缩小或放大字体）。

标签： html zooming

【解决方案1】：

尝试从标签列表中删除填充

ul.tabs li {
    display: inline;
    margin: 0;
    margin-right: 1%; /*distance between tabs*/
    font: normal 14px Verdana;
    padding: 0.5% 4%;    /*Remove This*/
    border: 1px solid white;
    border-bottom-color: black;
    color: white;

您的新 CSS 将如下所示

ul.tabs li {
        display: inline;
        margin: 0;
        margin-right: 1%; /*distance between tabs*/
        font: normal 14px Verdana;
        border: 1px solid white;
        border-bottom-color: black;
        color: white;

我还做了以下更改：

ul.tabs {
            padding: 1% 0;
            font-size: 0;
            margin: 0;
            list-style-type: none;
            text-align: center; /* Text made center*/
        }

删除了样式

<ul class="tabs" style="margin-right: 19%">

现在看起来像 <ul class="tabs">

整个代码：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Insert title here</title>
    <style type="text/css">
        body,html {
            height: 100%;
        }

        div.tabcontents {
            padding: 4%;
            color: white;
            height: 80%;
            background-color: blue;
            margin-left: 10%;
            margin-right: 10%;
        }

        ul.tabs {
            padding: 1% 0;
            font-size: 0;
            margin: 0;
            list-style-type: none;
            text-align: center;
        }

        ul.tabs li {
            position:static;
            max-width: 80%;
            display: inline;
            margin: 3px;
            margin-right: 1%; /*distance between tabs*/
            font: normal 14px Verdana;
            border: 1px solid white;
            border-bottom-color: black;
            color: white;
        }

        ul.tabs li a:hover,ul.tabs li:hover,ul.tabs li.activeTab {
            background: black;
            color: white;
        }

        ul.tabs li a {
            text-decoration: none;
            color: white;
        }
    </style>
</head>
<body bgcolor="black">

<ul class="tabs" >
    <li id="admin" class="activeTab"><a>tabA</a></li>
    <li id="admin" class="activeTab"><a>tabB</a></li>
    <li id="admin" class="activeTab"><a>tabC</a></li>
    <li id="admin" class="activeTab"><a>tabD</a></li>
    <li id="admin" class="activeTab"><a>tabE</a></li>
    <li id="admin" class="activeTab"><a>tabF</a></li>

</ul>
<div class="tabcontents">
    <div style="height: 100%; background-color: red"></div>
</div>

</body>
</html>

【讨论】：