彼此相鄰的位置按鈕

我想顯示我的後退和確認按鈕。正如你所看到的，我嘗試過顯示：內聯塊，但它沒有工作。我認爲可能存在一些衝突的代碼，但我不確定它在哪裏。這可能是一個愚蠢的問題，但請耐心等待。彼此相鄰的位置按鈕

這裏是我的代碼：

.form__confirmation { 
 
    padding: 0px 55px; 
 
} 
 

 
.form__confirmation2 { 
 
    padding: 0px 55px; 
 
} 
 

 
button { 
 
    font-size: 12px; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    letter-spacing: 1px; 
 
    background-color: #011f4b; 
 
    border: 1px solid #DADDE8; 
 
    color: #fff; 
 
    padding: 18px; 
 
    border-radius: 5px; 
 
    outline: none; 
 
    -webkit-transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
 
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
 
    position: relative; 
 
    left: 350px; 
 
    margin-bottom: 20px; 
 
    display: inline-block; 
 
} 
 

 
button:hover { 
 
    background-color: #1293e1; 
 
} 
 

 
button:active { 
 
    background-color: #1083c8; 
 
}

<div class="form__confirmation" type="submit" name="submit"> 
 
    <button>Confirm Information</button> 
 
</div> 
 
<div class="form__confirmation2"> 
 
    <button>Back</button> 
 
</div>

來源

2017-09-21 Joe F

你應該聲明'顯示：上button'的'父元素直列block'。 – UncaughtTypeError

.form__confirmation,.form__confirmation2 { 
 
     display: inline-block; 
 
\t \t }

<div class="form__confirmation" type="submit" name="submit"> 
 
    <button>Confirm Information</button> 
 
</div> 
 
<div class="form__confirmation2"> 
 
    <button>Back</button> 
 
</div>

你把他們內部div元素，默認爲display:block。要麼在同一個div中包含這兩個按鈕，要麼使用div{display:inline-block}。

來源

2017-09-21 13:52:14

我很蠢我很抱歉，謝謝:)我接受答案前7分鐘。 –

您需要應用display：inline-block;您的容器，像這樣：

.form__confirmation { 
 
\t \t padding: 0px 55px; 
 
     display: inline-block; 
 
\t \t } 
 
\t \t 
 
\t \t .form__confirmation2 { 
 
\t \t padding: 0px 55px; 
 
     display: inline-block; 
 
\t \t } 
 

 
\t \t button { 
 
\t \t font-size: 12px; 
 
\t \t text-transform: uppercase; 
 
\t \t font-weight: 700; 
 
\t \t letter-spacing: 1px; 
 
\t \t background-color: #011f4b; 
 
\t \t border: 1px solid #DADDE8; 
 
\t \t color: #fff; 
 
\t \t padding: 18px; 
 
\t \t border-radius: 5px; 
 
\t \t outline: none; 
 
\t \t -webkit-transition: background-color 0.2s cubic-bezier(0.4,  0, 0.2, 1); 
 
\t \t transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2,  1); 
 
\t \t position: relative; 
 
\t \t left: 350px; 
 
\t \t margin-bottom: 20px; 
 
\t \t display: inline-block; 
 
\t \t } 
 
\t \t button:hover { 
 
\t \t background-color: #1293e1; 
 
\t \t } 
 
\t \t button:active { 
 
\t \t background-color: #1083c8; 
 
\t \t }

<div class="form__confirmation" type="submit" name="submit"> 
 
    <button>Confirm Information</button> 
 
</div> 
 
<div class="form__confirmation2"> 
 
    <button>Back</button> 
 
</div>

來源

2017-09-21 13:52:26

彼此相鄰的位置按鈕

回答

相關問題