gpt4 book ai didi

html - 创建两个中间没有空格的按钮

转载 作者:太空宇宙 更新时间:2023-11-04 14:26:42 24 4
gpt4 key购买 nike

我需要两个“平面”按钮,它们之间没有空格。它应该是这样的: enter image description here

页面本身在 AngularJS 中。到目前为止,我已经创建了这个(只是片段):

HTML:

  <body ng-app="">
<section layout="row" layout-align="center center">
<button id="legal" ng-click="businessType=true" ng-model="businessType" ng-init="businessType = true">Legal Person</button>
<button id="individual" ng-click="businessType=false">Individual</button>
</section>

<p>Area 1 - common data</p>
<hr>

<div ng-if="businessType == true">
<p>Area 2 - legal person data</p>
</div>

<div ng-if="businessType == false">
<p>Area 2 - individual data</p>
</div>

<hr>
<p>Area 3 - common data</p>
<hr>
</body>

</html>

CSS:

button#legal:focus {
background: blue;
color: white;
}

button#individual:focus {
background: blue;
color: white;
}

JSFiddle

看起来(最初和选择选项时)像:

enter image description here enter image description here

我已经尝试了几个选项,包括 AngularJS Material 按钮等,但没有一个产生预期的效果,即看起来像模型示例的按钮(“扁平”状,没有空格)。

请问有什么帮助吗?

最佳答案

您可以尝试这些样式(因为您必须覆盖一些默认样式)并且不要忘记to remove whitespace在按钮之间 (这里我只是让它们彼此靠近)。您还可以考虑使用 autofocus 属性在开始时获得焦点。

button {
border: none;
outline: none;
padding: 10px 20px;
}

button#legal:focus,
button#individual:focus {
background: blue;
color: white;
}
<section>
<button id="legal" autofocus >Legal Person</button><button id="individual">Individual</button>
</section>

关于html - 创建两个中间没有空格的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48720374/

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