CSS調整元素寬度（遇到問題）

我試圖創建一個簡單的計算器，並且在格式化不同的元素框時遇到了問題。我基本上只需要將左欄中的項目（服務，第一食物，第二食物）放在頁面中間的左側部分，並將比較放在頁面中間的右側。我正在嘗試調整邊距，但它不斷與我的元素混淆。我對此比較陌生，所以我不確定我是否做錯了什麼。CSS調整元素寬度（遇到問題）

我的代碼：

.side { 
 
    margin: 30%; 
 
    border: 3px solid #73AD21; 
 
    position: relative; 
 
    width: 33%; 
 
} 
 
.sideone { 
 
    margin: 20%; 
 
    border: 3px solid #73AD21; 
 
    position:relative; 
 
    width: 33%; 
 
} 
 
.comparison { 
 
    position:relative; 
 
    margin-left: 30%; 
 
} 
 
.outer { 
 
    display: flex; 
 
} 
 
.color-red{ 
 
color:red; 
 
background:transparent} 
 
.color-green{ 
 
color:green; 
 
background:transparent}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<head> 
 
    <meta name="viewport" content="width=10px, initial-scale=1.0"> 
 
</head> 
 

 
<body> 
 

 
    <label> 
 
    Servings: 
 
    <input type="number" id="numberOfStocks" value="1" min="0" /> 
 
    </label> 
 
<div class="outer"> 
 
    <div> 
 
    <div class="side"> 
 
     <h2>First Item<span class="servingUnit"></span>:</h2> 
 
     <select class="selectStock"> 
 
     <option value="-1">Pick a food!</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
    </div> 
 
    <div class="sideone"> 
 
     <h2>Second Item<span class="servingUnit"></span>:</h2> 
 
     <select class="selectStock"> 
 
     <option value="-1">Pick a food!</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 

 
    </div> 
 
    </div> 
 
    <div class="comparison"> 
 
    <h2>Comparison:</h2> 
 
    <br> 
 
    <br> 
 
    <div class="result"></div> 
 
    </div> 
 
</div> 
 
    
 
</body>

實際功能不工作的片斷，但它不是真正的問題有關。謝謝您的幫助！

來源

2017-05-03 Dick Thompson

所以你想在左邊的兩個盒子在右邊比較？ – Keith

基本上是的，但我需要在頁面中間審查所有內容。現在它全部在左邊，我不知道如何改變這個 –

這是你正在嘗試做什麼？（https://jsfiddle.net/l0ul0u/sohpntvp/）

.side, .sideone { 
    border: 3px solid #73AD21; 
} 
h2{ 
    display: inline-block; 
} 
.outer { 
    display: flex; 
} 
.color-red{ 
    color:red; 
    background:transparent} 
.color-green{ 
    color:green; 
    background:transparent}

來源

2017-05-03 19:03:40 l0ul0u

這真是太棒了，謝謝！我怎樣才能使所有的元素都在中間居中，而將事物保持在左/右？ –

https://jsfiddle.net/l0ul0u/sohpntvp/3/ – l0ul0u

非常感謝！編輯 - 你知道我怎麼可以添加CSS類到下拉菜單嗎？我也想把它格式化在左邊的框上方 –

這是因爲你正在設置div元素。看看裏面的其他元素，你可以使用溢出元素來解決它們隱藏在div中的情況：

overflow：hidden;

例如：

.side { 
 
    margin: 30%; 
 
    border: 3px solid #73AD21; 
 
    width: 10%; 
 
    position: relative; 
 
    overflow: hidden; 
 
}

<div class="side"> 
 
     <h2>First Item<span class="servingUnit"></span>:</h2> 
 
     <select class="selectStock"> 
 
     <option value="-1">Pick a food!</option> 
 
     </select> 
 
     <br> 
 
     <br> 
 
    </div>

但是這樣一來就會隱藏起來。你可以解決它也設置div內的元素的大小，我認爲這可能會對你的建議更好。

來源

2017-05-03 19:00:09

這很有道理 - 你能解釋一下你做了什麼嗎？這段代碼看起來有點奇怪。謝謝您的幫助！ –

我複製了一段代碼，並在「.side」css類中添加了「overflow：hidden」。哈哈。那麼，你可以用很多方式解決它。但我想知道你到底在做什麼？似乎你正在嘗試適合小屏幕！如果是這樣，您可以根據屏幕尺寸製作不同的佈局。但如果只是一個正常的屏幕，你想填寫它也設置組件的大小。 –

是的，在代碼片段中有點奇怪，但只是爲了向您展示填充代碼的可能性，並不需要很長時間的修改。在組合框的情況下，你應該嘗試設置combox的大小，你把大的東西放在一個小盒子裏然後會泄漏出去。 –

CSS調整元素寬度（遇到問題）

回答

相關問題