創建兩個按鈕，兩個按鈕之間沒有空格
[英]Create two buttons without space in between them
問題描述
我需要兩個“扁平”按鈕，它們之間沒有空格。 它看起來應該像這樣：
頁面本身在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材質按鈕等，但是沒有一個產生預期的效果，即按鈕看起來像樣機上的示例（“扁平”，沒有空格）。
有什么幫助嗎？
3 個解決方案
解決方案1
3 已采納 2018-02-10 11:50:20
您可以嘗試使用這些樣式（因為您必須覆蓋一些默認樣式），並且不要忘記刪除按鈕之間的空格 （這里我只是使它們彼此靠近） 。 您還可以考慮將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>
解決方案2
2 2018-02-10 12:49:19
是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>
解決方案3
1 2018-02-10 11:47:31
因為默認情況下按鈕是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>
在橫幅中的兩個按鈕之間創建一個空格
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.