teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

CSS追加

2019/01/16 05:31

投稿

tyapapa
tyapapa

スコア51

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ボタンを配置してその中に文字を書くのですが文字数によってボタンの大きさ(長さ)が画像のように変わってしまうのでそこを変わらないようにしたいです。
2
2
  複数の書かれている文字が違うボタンをボタンの大きさが同じになるようにそろえて配置したいです。![イメージ説明](bafc58009b3032d1b62a2d62d9cae95c.png)
3
3
  Bootstrap3を使用しています。
4
- HTMLは以下の通りですCSSは特に変えてません
4
+ HTML&CSSは以下の通りです。
5
5
  ```html
6
6
  <div class="btn-group">
7
7
  <button type="button" class="btn btn-default interval">
@@ -14,4 +14,21 @@
14
14
  <p>説明文を長々と</p>
15
15
  </ul>
16
16
  </div>
17
+ ```
18
+ ```CSS
19
+ button.interval{
20
+ padding: 70px 160px;
21
+ }
22
+
23
+ .btn-group {
24
+ margin-bottom: 50px;
25
+ margin-left: 30px;
26
+ }
27
+ button.btn.btn-default.interval {
28
+ background-color:#FFF1B8;
29
+ }
30
+
31
+ .btn-group>.btn:first-child {
32
+ margin-left:40px !important;
33
+ }
17
34
  ```