彼此相邻的位置按钮

我想显示我的后退和确认按钮。正如你所看到的，我尝试过显示：内联块，但它没有工作。我认为可能存在一些冲突的代码，但我不确定它在哪里。这可能是一个愚蠢的问题，但请耐心等待。彼此相邻的位置按钮

这里是我的代码：

.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

彼此相邻的位置按钮

回答

相关问题