创建两个按钮，两个按钮之间没有空格

Question

我需要两个“扁平”按钮，它们之间没有空格。 它看起来应该像这样：

页面本身在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

（最初以及在选择选项时）如下所示：

我已经尝试了几个选项，使用AngularJS材质按钮等，但是没有一个产生预期的效果，即按钮看起来像样机上的示例（“扁平”，没有空格）。

有什么帮助吗？

Answer 1

您可以尝试使用这些样式（因为您必须覆盖一些默认样式），并且不要忘记删除按钮之间的空格 （这里我只是使它们彼此靠近） 。 您还可以考虑将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>

Answer 2

是2018年！ 将它们包装在具有display: inline-flex或display: flex的元素display: inline-flex 。

 .button-container { display: inline-flex; }

 <div class="button-container"> <button type="button">Button1</button> <button type="button">Button2</button> <button type="button">Button3</button> </div>

Answer 3

因为默认情况下按钮是inline元素，它们占用空间以使其自身对齐。

因此，将flex应用于按钮行，这将成为button flex项目。 同时删除button的outline

堆栈片段

 button#legal:focus { background: blue; color: white; } button#individual:focus { background: blue; color: white; } section[layout="row"] { display: flex; } button { outline: none; }

 <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>

创建两个按钮，两个按钮之间没有空格

问题描述

3 个解决方案

解决方案1
3 已采纳 2018-02-10 11:50:20

解决方案2
2 2018-02-10 12:49:19

解决方案3
1 2018-02-10 11:47:31

创建两个按钮，两个按钮之间没有空格

问题描述

3 个解决方案

解决方案1 3 已采纳 2018-02-10 11:50:20

解决方案2 2 2018-02-10 12:49:19

解决方案3 1 2018-02-10 11:47:31

解决方案1
3 已采纳 2018-02-10 11:50:20

解决方案2
2 2018-02-10 12:49:19

解决方案3
1 2018-02-10 11:47:31