將兩個元件並排放置在底部？

Question

我試圖位置由側底側的兩個按鈕，它們都必須填滿屏幕的寬度，所以我讓他們寬50％ 這是我的HTML：

#norm, #eco { 
 
\t background-color: #210511; 
 
\t color: white; 
 
\t width: 50%; 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t z-index: 999; 
 
} 
 
#norm { 
 
\t float: left; 
 
} 
 
#eco { 
 
\t float: right; 
 
}

<div id="btmBtnsContainers"> 
 
    <input type="button" name="normal" value="Normal" id="norm" /> 
 
    <input type="button" name="economy" value="Economy" id="eco" /> 
 
</div>

但它只有一個按鈕結束，另一個隱藏！

Answer 1

使您的容器absolute而不是按鈕。就像這樣：

#btmBtnsContainers { 
 
    width: 100%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left:0; 
 
    z-index: 999; 
 
} 
 

 
#norm, 
 
#eco { 
 
    background-color: #210511; 
 
    color: white; 
 
    width: 50%; 
 
    float:left; 
 
}

<div id="btmBtnsContainers"> 
 
    <input type="button" name="normal" value="Normal" id="norm" /> 
 
    <input type="button" name="economy" value="Economy" id="eco" /> 
 
</div>

Answer 2

沒有浮動的按鈕時，你是絕對定位他們的點。相反，分配給他們的左右位置是這樣的：

#norm,#eco { 
 
    background-color:#210511; 
 
    color:white; 
 
    width: 50%; 
 
    position: absolute; 
 
    bottom: 0; 
 
    z-index: 999; 
 
} 
 

 
#norm { 
 
    left:0; 
 
} 
 

 
#eco { 
 
    right:0; 
 
}

<div id="btmBtnsContainers"> 
 
     <input type="button" name="normal" value="Normal" id="norm" /> 
 
     <input type="button" name="economy" value="Economy" id="eco" /> 
 
    </div>

Answer 3

NIZA在這樣做，這裏的一種方式回答是另一個：

既然你已經爲輸入設定position:absolute ，他們被放置在相同的位置。只需加上right:0即可將其放在右側。

此外，當您將position更改爲absolute時，float屬性將不再起作用，因此您可以將其刪除。

#norm,#eco { 
 
      background-color:#210511; 
 
      color:white; 
 
      width: 50%; 
 
      position: absolute; 
 
      bottom: 0; 
 
      z-index: 999; 
 
     } 
 
     #eco 
 
     { 
 
      right:0; 
 
     }

<div id="btmBtnsContainers"> 
 
     <input type="button" name="normal" value="Normal" id="norm" /> 
 
     <input type="button" name="economy" value="Economy" id="eco" /> 
 
    </div>

Answer 4

使用left和right而不是float。

#norm,#eco { 
 
      background-color:#210511; 
 
      color:white; 
 
      width: 50%; 
 
      position: absolute; 
 
      bottom: 0; 
 
      z-index: 999; 
 
     } 
 
     #norm 
 
     { 
 
      left:0; 
 
     } 
 
     #eco 
 
     { 
 
      right:0; 
 
     }

<div id="btmBtnsContainers"> 
 
     <input type="button" name="normal" value="Normal" id="norm" /> 
 
     <input type="button" name="economy" value="Economy" id="eco" /> 
 
    </div>