我正在尝试创建一个简单的计算器，但在设置不同元素框的格式时遇到了问题。我基本上只需要将左栏中的元素(服务、第一种食物、第二种食物)放在页面中间的左侧部分，并将比较放在页面中间的右侧部分。我正在尝试调整边距，但它一直在扰乱我的元素。我对此比较陌生，所以我不确定我是否做错了什么。
我的代码:
.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>实际功能不适用于代码段，但它与问题并不真正相关。感谢您的帮助!
最佳答案
这就是你想要做的吗？ ( 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}
关于javascript - CSS 调整元素宽度(有问题)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43767525/