html - 根据 div 宽度翻译标签
问题描述
这主要是一个帖子,不要用不相关的信息把另一个帖子弄得乱七八糟。
我正在尝试在标签上使用翻译,其距离应基于它旁边的菜单 div。所述菜单最初不显示,并且标签用作显示/隐藏菜单的复选框。它还有一个max-width
基于页面宽度的集合,这是我遇到一些问题的地方。当页面足够宽时,设置像素量的平移工作正常。然而,当页面变得太窄时(例如在移动设备上),标签会离右边太远,有时甚至会夹在右边的按钮上。下面是一些图片来说明这一点。
隐藏菜单的菜单标签:
这是它目前的样子:
在这里,标签在右侧太远了,因为菜单 div 现在位于其max-width
.
这就是我想要的样子:
这是我的代码:
.topnav .dropdown {
display: none;
overflow-y: auto;
position: absolute;
z-index: 10;
width: 200px;
max-width: 50%;
/* [...] */
}
#dropdown-toggle-label {
display: block;
margin: auto 0;
padding: .5em;
}
#dropdown-toggle:checked + label {
transform: translateX(215px);
-ms-transform: translateX(215px);
}
#dropdown-toggle:checked ~ .dropdown{
display: block;
}
<div class="topnav">
<input type="checkbox" id="dropdown-toggle">
<label for="dropdown-toggle" id="dropdown-toggle-label"><i class="fas fa-bars"></i></label>
<ul class="dropdown">
...
</ul>
</div>
如果可能的话,我想在不使用 javascript 的情况下解决这个问题。
编辑:这是一个说明问题的JSFiddle 。
解决方案
尝试设置width
无max-width
并使用margin-left
设置左间隙。
所以编辑的类看起来像这样:
.topnav .dropdown {
display: none;
overflow-y: auto;
position: absolute;
z-index: 10;
width: 215px;
height: auto;
}
#dropdown-toggle:checked + label {
margin-left: 230px;
}
如果您想调整移动设备的差距,那么我们创建以下规则:
@media (max-width: 620px) {
.topnav .dropdown {
width: 24%;
}
#dropdown-toggle:checked + label {
margin-left: 27%;
}
}
一个例子:
.topnav .dropdown {
display: none;
overflow-y: auto;
position: absolute;
z-index: 10;
width: 215px;
height: auto;
}
#dropdown-toggle {
display: none;
}
#dropdown-toggle-label {
display: block;
margin: auto 0;
padding: 0.5em;
}
#dropdown-toggle-label:hover {
cursor: pointer;
}
#dropdown-toggle:checked + label {
margin-left: 230px;
}
#dropdown-toggle:checked ~ .dropdown {
display: block;
}
.topnav .right-bound {
display: flex;
margin-left: auto;
}
@media (max-width: 620px) {
.topnav .dropdown {
width: 24%;
}
#dropdown-toggle:checked + label {
margin-left: 27%;
}
}
/* Typography (irrelevant for the problem) */
:root {
--primary-text-color: #fff;
--highlight-text-color: rgb(10, 138, 101);
--primary-color: rgb(13, 189, 139);
--secondary-color: #e9e9e9;
--background-color: #f6f6f6;
--primary-highlight-color: rgb(9, 153, 112);
--secondary-highlight-color: #9c9c9c;
--topnav-height: 70px;
--banner-height: 450px;
}
.topnav {
--clr-highlight: var(--secondary-color);
display: flex;
width: 100%;
height: var(--topnav-height);
background-color: var(--primary-color);
overflow: hidden;
font-weight: bold;
}
.topnav ul {
display: flex;
height: inherit;
margin: 0;
padding-left: 0;
}
.topnav li {
list-style-type: none;
margin: auto 1em;
cursor: pointer;
}
.topnav a {
text-decoration: none;
color: var(--primary-text-color);
}
.topnav .dropdown {
background-color: var(--primary-color);
padding: 0 1em 1em 0;
-webkit-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.3);
}
.dropdown li {
padding: 1em 0;
}
#dropdown-toggle-label {
font-size: 1.5em;
color: var(--primary-text-color);
}
<div class="topnav">
<input type="checkbox" id="dropdown-toggle">
<label for="dropdown-toggle" id="dropdown-toggle-label">O<i class="fas fa-bars"></i></label>
<ul class="dropdown">
<li>
<a href="/#A">A</a>
</li>
<li>
<a href="/B">B</a>
</li>
<li>
<a href="/C">C</a>
</li>
<li>
<a href="/D">D</a>
</li>
</ul>
<ul class="right-bound">
<li>
<a href="/login">Login</a>
</li>
</ul>
</div>
推荐阅读
- github - 将 github 渲染的 .md 页面嵌入为 iframe
- delphi - 从 delphi 或 lazarus 调用 Visual Studio dll
- oracle-apex-5.1 - APEX 报告显示不可编辑的复选框
- javascript - 如何使用 JavaScript/Jquery 检查视口是否位于顶部?
- r - 访问不同列中的数据点
- c# - HttpPost 上的 IList 始终为空
- javascript - 如何阻止 .insertBefore 方法删除分页符?
- python - Pandas DataFrames 列未被识别为数字
- python - 在 Python 中计算分布的对数似然
- sas - 如何从数据集中选择行,并将特定条件应用于 SAS Enterprise Guide 中的每个子集