gpt4 book ai didi

jquery - 如何使这两个按钮具有相同的宽度?

转载 作者:行者123 更新时间:2023-12-01 07:42:11 28 4
gpt4 key购买 nike

enter image description here

我希望登录和注册按钮具有相同的宽度。我希望使用 flex 或类似的东西来完成它,但不要对像素数量进行硬编码。

这是我当前的 JSFiddle,https://jsfiddle.net/akap9dq0/ .

<body>
<div class="container-fluid">
<nav class="navbar navbar-default">
<div class="navbar-header">
<a class="navbar-brand" href="#">...</a>
<button aria-expanded="false" class="collapsed navbar-toggle" data-target="#main_menu" data-toggle="collapse" type="button">
<span class="sr-only">toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_menu">
<form class="navbar-form navbar-right" style="border: none;">
<div id="main_menu_container">
<div id="main_menu_form_input">
<input class="form-control" type="text" name="username" placeholder="User name" style="flex:1;">
<input class="form-control" type="password" name="password" placeholder="Password" style="flex:1;">
</div>
<div id="main_menu_form_buttons">
<input class="btn btn-block btn-success" type="submit" style="flex: 1; margin: 0;" value="login">
<input class="btn btn-block btn-primary" type="submit" style="flex: 1; margin: 0;" value="register">
</div>
</div>
</form>
</div>
</nav>
</div>
</body>

最佳答案

您可以使用以下 CSS 实现您想要的效果:

.control-panel {
display: inline;
}

.control-panel__btn {
display: table-cell;
width: 50%;
padding-left: 10px;
}

.control-panel__btn .btn {
width: 100%;
}

和 HTML:

<div class="control-panel">
<div class="control-panel__btn">
<input class="btn btn-success" type="submit" name="signinup" value="Sign In">
</div>
<div class="control-panel__btn">
<input class="btn btn-primary" type="submit" name="signinup" value="Sign Up">
</div>
</div>

工作 fiddle :https://jsfiddle.net/akap9dq0/6/

关于jquery - 如何使这两个按钮具有相同的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45808019/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com