製作表單按鈕標籤/文字響應

我目前正在使用div標籤構建表單，但是，我遇到了按鈕問題，它是文本。在桌面網站上，表單看起來很好，但是，無論何時在移動設備上，提交和重置按鈕文本保持（居中對齊），但文本的行爲不應該如此。製作表單按鈕標籤/文字響應

請有人可以幫助我嗎？

2017-04-10 Anam

您的網站上也有一定的CSS規則，使您的按鈕取到了其父的25％的寬度：

.submit, .reset { 
    max-width: 25%; 
    ... 
}

爲了使這些按鈕當瀏覽器的寬度低於600像素時，我們假設100％寫入：

@media (max-width: 600px) { 
    .submit, .reset { 
    max-width: 100%; 
    } 
}

當然，它必須低於max-width: 25%規則，所以它不會被覆蓋。

來源

2017-04-10 22:24:40 Linek

剛剛添加了你的代碼，它工作正常，但是，崩潰後提交和重置按鈕之間存在太大的差距。 – Anam

@TicketForLessUK據我所知，沒有差距，那麼如何能有太大的差距？ – Linek

發生這種情況的原因是，當有足夠的空間時，該按鈕的大小由其周圍的字體寬度+填充確定。每當由周圍div提供的空間不夠時（例如，在較小的屏幕上），它不再依賴字體寬度，並嘗試用填充來維持按鈕大小。首先，首先，這實際上是一種預期的行爲。

你該怎麼辦來解決這個要看是什麼樣的解決方案，你想結了，一個快速的解決方案是：

1 - 你可能要麼去@media查詢或可能引導，讓按鈕去全尺寸的屏幕（如全行一樣）

你不希望在移動設備上的某一行有這兩個按鈕，說你做了它，並用腳本使文本變小？那麼用戶最後怎麼讀？這不是一個好主意。

來源

2017-04-10 22:24:45

他的網站使他們98％的寬度，但也有其他規則'最大寬度：25％'所以這是他的問題。這些特定按鈕的寬度不是由文本計算的。如果你問，他在這個網站上有什麼不好的設計。 – Linek

你是對的我只是在說話 –

您需要刪除按鈕上的max-width: 25%;。

您可以使用類似這樣的按鈕：

display: inline-block; 
width: 100%; 
max-width: 220px;

您可能需要使用媒體查詢：

@media(max-width: 480px) { 
    .yourClass{ 

    } 
}

來源

2017-04-10 22:27:09

你有一個最大寬度上的提交和復位類設置：

.submit, .reset { 
    max-width: 25%;

當容器變小時，按鈕將拒絕得到更寬（並且堆棧I爲廟）。您可以設置的100％，以較小的斷點最大寬度或明確的寬度：

@media (max-width: 600px) { 
     .submit, .reset { 
     max-width: 100%; 
     } 
}

來源

2017-04-10 22:29:19 JDev518

在你的原單碼您有：

.submit, .reset { 
    max-width: 25%; 
    height: auto; 
    background-color: orange !important; 
    z-index: 8; 
    white-space: nowrap; 
    font-size: 15px; 
    line-height: 14px; 
    font-weight: 700; 
    color: rgb(255, 255, 255); 
    font-family: Montserrat; 
    background-color: rgb(247, 153, 31); 
    border-radius: 30px; 
    outline: none; 
    box-shadow: none; 
    box-sizing: border-box; 
    cursor: pointer; 
    visibility: inherit; 
    transition: none; 
    text-align: inherit; 
    margin: 0px; 
    padding: 17px 32px; 
    letter-spacing: 0px; 
    opacity: 1; 
    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); 
    transform-origin: 50% 50% 0px; 
    overflow: hidden; 
}

從上面的代碼，我刪除padding: 17px 32px;。然後用height: 40px !important;代替。填充導致按鈕在移動瀏覽時無響應。設置高度解決了問題！

來源

2017-04-10 22:33:16

Leon我刪除了Linek的代碼並測試了你的代碼。工作正常，但是，我仍然錯過了提交和重置的最後部分。 – Anam

只需將以下樣式添加到包裝這些按鈕的股利。

display:flex; 
flex-wrap:wrap; 
align-items:center; 
justify-content:center;

來源

2017-04-11 07:33:57

製作表單按鈕標籤/文字響應

回答

相關問題