Hướng dẫn resize button css - thay đổi kích thước nút css

Tôi có một "nút" mà tôi muốn sử dụng tất cả các trang web của mình, nhưng tùy thuộc vào vị trí trong trang web của

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

1, tôi muốn nó hiển thị ở các kích cỡ khác nhau.

Trong HTML của tôi, tôi đã thử (nhưng nó không hoạt động):

This is a button

Và CSS phù hợp:

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

Tôi cho rằng nếu mỗi lần tôi gọi đây là

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

2, tôi chỉ có thể vượt qua với kích thước và hey-presto! .... nhưng không ....

Bằng cách thêm chiều rộng và chiều cao khi tôi gọi

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

1

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

2 dường như không làm gì với kích thước của nó. Có ai biết làm thế nào tôi có thể làm điều này? Và nếu tôi đặt chiều rộng và chiều cao trong

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

5 thì

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

1 sẽ có cùng kích thước ở khắp mọi nơi.

Kosh

5.9962 Huy hiệu vàng35 Huy hiệu bạc67 Huy hiệu Đồng2 gold badges35 silver badges67 bronze badges

hỏi ngày 27 tháng 7 năm 2012 lúc 14:04Jul 27, 2012 at 14:04

1

Bạn không nên sử dụng trực tiếp các thuộc tính "chiều rộng" và "chiều cao", sử dụng thuộc tính kiểu như

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

7 Nếu bạn muốn sử dụng kiểu dáng nội tuyến:

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

8

Tuy nhiên, lưu ý rằng kiểu dáng nội tuyến thường nên tránh vì nó làm cho việc bảo trì và cập nhật phong cách là một cơn ác mộng. Cá nhân, nếu tôi có kiểu nút như của bạn nhưng cũng muốn áp dụng các kích thước khác nhau, tôi sẽ làm việc với nhiều lớp CSS để định cỡ, như thế này:inline styling should generally be avoided since it makes maintenance and style updates a nightmare. Personally, if I had a button styling like yours but also wanted to apply different sizes, I would work with multiple css classes for sizing, like this:

   .button {
        background-color: #000000;
        color: #FFFFFF;
        padding: 10px;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin:10px
    }
    
    .small-btn {
        width: 50px;
        height: 25px;
    }
    
    .medium-btn {
        width: 70px;
        height: 30px;
    }
    
    .big-btn {
        width: 90px;
        height: 40px;
    }

    
This is a big button
    
This is a medium button
    
This is a small button
 

Ví dụ về JSfiddle

Sử dụng cách xác định kiểu này sẽ loại bỏ tất cả thông tin kiểu từ đánh dấu HTML của bạn, điều này sẽ giúp dễ dàng hơn nếu bạn muốn thay đổi kích thước của tất cả các nút nhỏ - bạn sẽ chỉ phải thay đổi chúng một lần trong CSS.

Đã trả lời ngày 27 tháng 7 năm 2012 lúc 14:07Jul 27, 2012 at 14:07

Anders Arpianders ArpiAnders Arpi

8.1873 Huy hiệu vàng32 Huy hiệu bạc49 Huy hiệu đồng3 gold badges32 silver badges49 bronze badges

3

Nếu bạn muốn gọi một kích thước khác cho nút nội tuyến, có lẽ bạn sẽ làm điều đó như thế này:

This is a button

Hoặc, một cách tốt hơn để có các kích thước khác nhau (giả sử sẽ có 3 kích thước tiêu chuẩn cho nút) sẽ là có các lớp chỉ cho kích thước.

Ví dụ: bạn sẽ gọi nút của mình như thế này:

This is a button

Và trong CSS của bạn

.button.small { width: 60px; height: 100px; }

Và chỉ cần tạo các lớp cho mỗi kích thước bạn muốn có. Bằng cách đó, bạn vẫn có đặc quyền sử dụng bảng kiểu trong trường hợp nói, bạn muốn thay đổi kích thước của tất cả các nút nhỏ cùng một lúc.

Đã trả lời ngày 27 tháng 7 năm 2012 lúc 14:10Jul 27, 2012 at 14:10

1

Một cách khác là bạn được phép có nhiều lớp trong một thẻ. Xem xét:

 
This is a big button
 
This is a small button

Và CSS:

 .button {
     /* all your common button styles */
 }

 .big {
     height: 60px;
     width: 100px;
 }
 .small {
     height: 40px;
     width: 70px;
 }

và như thế.

Đã trả lời ngày 27 tháng 7 năm 2012 lúc 14:12Jul 27, 2012 at 14:12

Cobaltduckcobaltduckcobaltduck

1.5985 Huy hiệu vàng25 Huy hiệu bạc 50 Huy hiệu Đồng5 gold badges25 silver badges50 bronze badges

3

Sử dụng các kiểu nội tuyến:

This is a button

Vĩ cầm

bugwheels94

29,6K3 Huy hiệu vàng37 Huy hiệu bạc60 Huy hiệu Đồng3 gold badges37 silver badges60 bronze badges

Đã trả lời ngày 27 tháng 7 năm 2012 lúc 14:06Jul 27, 2012 at 14:06

TurnipturnipTurnip

35.3K15 Huy hiệu vàng88 Huy hiệu bạc107 Huy hiệu đồng15 gold badges88 silver badges107 bronze badges

1

thử nút này có thể thay đổi lại

.button {
  background-color: #000000;
  color: #FFFFFF;
  float: right;
  padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

0

Đã trả lời ngày 7 tháng 8 năm 2014 lúc 8:35Aug 7, 2014 at 8:35

3