Question

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

所有标签都位于中间顶部，然后彼此有两个div：

Blue Div
Red 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>

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

网站放大缩小会扭曲内容

1 个答案: