- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
标签位于 <li>
区域之外我想要它们的标签。我希望标签在灰色区域居中并有很多填充,这样它们就可以像按钮一样使用。我不得不弄乱一些东西来让按钮响应,这导致了困惑的定位。
我试过弄乱位置:;属性,因为我认为这就是导致事情失控的原因,还尝试更改显示:;属性。
main div ul.primary-list {
width: 100%;
display: grid;
grid-template-columns: .5% 1fr 1fr .5%;
grid-template-rows: 50% 50%;
grid-template-areas: ". bathroom bedrooom ."". kitchen livingroom .";
}
main div ul.primary-list li#bathroom-button {
grid-area: bathroom;
text-align: center;
background-color: #d1d1d1;
position: relative;
width: 100%;
border: 2px solid #000;
border-top-left-radius: 300px;
}
main div ul.primary-list li#bathroom-button:after {
content: "";
display: block;
padding-bottom: 100%;
}
main div ul.primary-list li#bathroom-button a {
position: absolute;
display: block;
margin: 0 auto;
height: 100%;
}
main div ul.primary-list li#bedroom-button {
text-align: center;
grid-area: bedrooom;
background-color: #d1d1d1;
position: relative;
width: 100%;
border-top-right-radius: 300px;
}
main div ul.primary-list li#bedroom-button:after {
content: "";
display: block;
padding-bottom: 100%;
}
main div ul.primary-list li#bedroom-button a {
position: absolute;
display: block;
margin: 0 auto;
height: 100%;
}
main div ul.primary-list li#kitchen-button {
text-align: center;
grid-area: kitchen;
background-color: #d1d1d1;
position: relative;
width: 100%;
border-bottom-left-radius: 300px;
}
main div ul.primary-list li#kitchen-button:after {
content: "";
display: block;
padding-bottom: 100%;
}
main div ul.primary-list li#kitchen-button a {
position: absolute;
display: block;
margin: 0 auto;
height: 100%;
}
main div ul.primary-list li#livingroom-button {
text-align: center;
grid-area: livingroom;
background-color: #d1d1d1;
position: relative;
width: 100%;
border-bottom-right-radius: 300px;
}
main div ul.primary-list li#livingroom-button:after {
content: "";
display: block;
padding-bottom: 100%;
}
main div ul.primary-list li#livingroom-button a {
position: absolute;
display: block;
margin: 0 auto;
height: 100%;
}
<body>
<header>
<div>
<h1>The Essential List</h1>
</div>
</header>
<main>
<h2>Pick an area</h2>
<div>
<ul class="primary-list">
<li id="bathroom-button"><a href="#">Bathroom</a></li>
<li id="bedroom-button"><a>Bedroom</a></li>
<li id="kitchen-button"><a>Kitchen</a></li>
<li id="livingroom-button"><a>Living Room</a></li>
</ul>
</div>
</main>
<footer>
<div>
<p>Somethingsomethingsomething</p>
</div>
</footer>
<script>
</script>
</body>
我希望 <a>
标签将继续嵌套在我的 <li>
的中间。标签,但它们似乎位于左上角。
最佳答案
所以,给你的 <a></a>
样式将宽度和高度添加到自动,以便您可以将它们定位为:
position: absolute;
left: 50%;
top: 50%;
transform: translate(50%,-50%);
它将居中,然后您也可以向 a 添加填充。
其他选项是将宽度和高度设置为 100%,然后设置:
text-align: center;
vertical-align: middle;
line-height: 100%;
但这会阻止添加填充,除非你在 <a></a>
中添加一些选择器
关于html - 我怎样才能操纵我的 <a> 标签的位置,以便它们在我的 <li> 标签中到达我想要的位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56698443/
我是puppeteer的新手(通常对javascript不太了解),并且正在尝试编写一些基本功能来: 从XPath获取所有链接 循环浏览并单击那些链接 屏幕截图并保存页面的HTML 返回屏幕快照,然后
您好,我正在尝试创建一个我想通过网络发送到服务器的数据包,我几乎已经对数据包进行了排序,但是它缺少一个长度标识符,我需要在我的方法结束时计算它并添加放入数据包。 数据包结构是这样的 前导值标识符 (U
我正在尝试更改按钮的样式(实际上只是一个 div)。我可以在 CSS 中使用 .classname:active 来实现,但是按钮只会在被点击时改变样式;单击释放后,它不会保持样式更改。所以,我决定使
我有一个下拉导航栏(fiddle here 和下面的代码片段)。单击 SubItem 时,JS 函数会进行 Ajax 调用(未显示)。我想要实现的是在单击 SubItem 时隐藏 SubItems 列
给定一组平面图(Autocad、svg 或任何需要的格式...),我想以编程方式生成从 A 点到 B 点的方向。基本上我想说:“我如何获得从101房间到143房间?” (或三倍奖励积分,从 101 房
我在 Win32 下的 MS dev studio 中将一些代码从 C 转换为 C++。在旧代码中,我使用 QueryPerformanceCounter() 进行了一些高速计时,并对获得的 __in
我正在寻找一种方法来从 QTableWidget 单元格中挤出所有可能的空间。我粘贴了一些代码来演示我在下面尝试过的事情,并且我上传了在 OSX 10.8.5、Qt 4.8.4、PySide 1.2.
对于 PhoneGap 移动应用程序,我有以下场景: 应用程序打开并显示index.html 用户登录并被重定向到 home.html 然后用户可以转到 news.html 我想以一种方式处理 hom
可能是一个简单的问题: 尝试使用plotly生成散点图并自定义图例。 这是我的数据: require(plotly) set.seed(1) my.df % add_annotations(text=
在 Instagram/Facebook 上的帖子下方,您会看到类似“第 1 个人、第 2 个人和其他 10 个人喜欢此帖子”的文字。我想知道如何使用 Django 来实现网站的相同效果?通常,我会使
我必须使用 Form.Action 重定向到将从我的页面获取值的脚本。值得注意的是,这个脚本是外部的。 我的问题是,我还想要被点击并连接了 Action 的按钮,以便首先在后面的代码中完成一些功能。
我有一个问题。 我可以在 Express 中操纵路线吗?当我发出 get 或 post 申请地址时,我可以将 2 条路线传递到同一个 get 或 post 申请吗?像这样的东西。 module.exp
如果我在不同的 Canvas 上绘制我的图像,我可以使用 js 库应用一些效果,如淡入淡出、移动和其他效果吗?如果可能的话,在速度和性能方面可能会很有趣,而不是操纵“原始”?非常感谢 最佳答案 if
我希望你能帮助我。如何转换这个扁平的 JavaScript 数组,来自: [ {"state":"First State","district":"First District","local_
我有一个 React JSX 元素,我想遍历它的子元素,对其中的每个字符串元素执行替换(或任何其他操作),然后返回新的、修改后的 JSX 元素。例如: var element = Text { var
我正在制作一个 Java 网络项目,我想在其中使用一些 javascript 操作一些前端 SVG 元素。 我正在绘制一个相当简单的车库图,其中有一个来自 JSP 页面的棚屋元素。 我想要一个 jav
我读过许多帖子,其中人们询问有关对 XML 元素强制执行某些属性顺序的问题,一般的回答是这不合法/必需/不允许/相关/其他。 我不是在寻找任何说我不应该关心属性顺序的回复,所以如果这是你的观点,请不要
大家好,我的问题是,如何将两个 C 风格的字符串 append 到一个字符串中? 我对 C++ 的处理方式 (std::string) 很感兴趣,我从未接触过 C 风格的字符串,需要为我当前的开发项目
我选择了 HTML 页面上的所有节点,如下所示: var all = $('*'); 然后我遍历每个节点,检查每个节点是否有关联的文本值: var newDom = all.map((i, node)
示例取自 Mozilla's help page re = /(\w+)\s(\w+)/; str = "John Smith"; newstr = str.replace(re, "$
我是一名优秀的程序员,十分优秀!