我需要两个“平面”按钮，它们之间没有空格。它应该是这样的:
页面本身在 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;
}
看起来(最初和选择选项时)像:
我已经尝试了几个选项，包括 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/