javascript - CSS 按钮不可点击,具体取决于大小和边距(移动设备)
问题描述
目前,我正在制作一个从桌面到移动的响应式网站。我现在专注于做手机,但后来遇到了一个问题,那就是我的 css 按钮。由于某些原因,它们可以以某种格式单击,但不能按我想要的大小和边距格式。另外,我在正常屏幕尺寸下没有遇到这种情况。任何人都有一个解决方案让它可以点击我想要的大小?
这是CSS:
.article.container {
padding: 4rem;
display: flex;
flex-direction: column;
flex-wrap: wrap;
background-color: white;
justify-content: center;
align-items: center;
}
.flex.container.parent {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: all;
text-align: center;
align-items: center;
vertical-align: middle;
}
.tab-selections {
width: 29%;
background-color: rgb(242, 242, 242);
height: 200%;
display: flex;
margin: 0em;
color: rgb(75, 75, 75);
font-size: 15px;
text-decoration: none;
margin-left: 1em;
border-left: 0.6em solid;
border-left-color: transparent;
justify-content: center;
text-align: center;
align-items: center;
vertical-align: middle;
}
.tab-selections:hover {
background-color: rgb(205, 221, 255);
color: rgb(75, 75, 75);
}
.active {
display: flex;
background-color: rgb(205, 221, 255);
border-left: .6em solid;
border-left-color: rgb(87, 0, 255);
text-align: center;
}
/* for Mobile */
@media screen and (max-width: 540px) {
.article.container {
padding: 0em;
flex-wrap: wrap;
}
.flex.container.parent {
flex-direction: row;
}
.tab-selections {
height: 30%;
width: 100%;
margin-left: 0em;
margin-top: 1em;
}
}
这是 HTML (ReactJS):
<BrowserRouter>
<div className="article container">
<div className="flex container parent">
<NavLink className="tab-selections" to="/sample/article">
ARTICLES
</NavLink>
<NavLink className="tab-selections" to="/sample/casestudies">
CASE STUDIES /<br />
WHITE PAPERS
</NavLink>
<NavLink className="tab-selections" to="/sample/news">
NEWS/EVENTS
</NavLink>
</div>
<div className="a-content-flex">
<div>
<Route
exact
path="/sample/article"
component={InsightHomeSummaryArticles}
/>
<Route path="/sample/casestudies" component={CaseStudies} />
<Route path="/sample/news" component={News} />
</div>
</div>
</div>
</BrowserRouter>
解决方案
我找到了解决方案!所以,我所做的是从“.article.container”中删除填充,然后将其更改为margin-top!谢谢您的帮助!
推荐阅读
- .htaccess - 允许索引子目录但不允许根目录
- javascript - 如何使用不同的用户帐户更新解析用户帐户
- wordpress - 在移动设备上投资专栏
- c++ - 了解具有多个网格的模型
- c++ - 返回类的实例导致无效地址错误
- php - For 循环的最后一次迭代,带有 If 条件和树枝
- android - Picasso 不会从 API 28 中的 HTTP 链接加载图像
- hive - 配置单元管理的表记录计数结果未显示
- javascript - 如何在Javascript中的For循环中添加字符串
- swift - 用于 iOS 和 MacOS 目标的具有共享 CoreData 的 Xcode 项目