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 Material按钮等，但没有产生预期的效果，即在样机上看起来像示例的按钮（'扁平'，没有空格）。

对此有任何帮助吗？

Answer 1

您可以尝试这些样式（因为您必须覆盖一些默认样式）并且不要忘记按钮之间的to remove whitespace （这里我只是让它们接近彼此）。您还可以将autofocus属性视为开始时的焦点。

＆＃13;

button {
  border: none;
  outline: none;
  padding: 10px 20px;
}

button#legal:focus,
button#individual:focus {
  background: blue;
  color: white;
}

＆＃13;

<section>
  <button id="legal" autofocus >Legal Person</button><button id="individual">Individual</button>
</section>

＆＃13;

Answer 2

2018年！使用display: inline-flex或display: flex将其包裹在元素中。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

因为按钮默认为inline个元素，这些元素占用空间来对齐。

因此，使用 flex 来创建button弹性项目的按钮行。同时删除outline

的button

Stack Snippet

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 个答案: