html-为什么我的三个按钮是垂直的而不是水平的？
[英]html - Why my three buttons are vertical instead of horizontal?
问题描述
Sorry for the confusing I caused. 
对不起，我造成的混乱。 I did not paste my code because it is part of my big assignment. 我没有粘贴我的代码，因为它是我的重要任务的一部分。 Also, I do not sure what parts of code cause the problem. 另外，我不确定代码的哪些部分会导致此问题。 So I paste the parts of the code that contains these three buttons 所以我粘贴了包含这三个按钮的代码部分
I want to make these three button display horizontally( Which I think is default). 我想使这三个按钮水平显示（我认为这是默认设置）。 However, the website shows them vertically. 但是，该网站将其垂直显示。 Could anyone tell me the reason behind it? 谁能告诉我背后的原因？ what should I do to make them horizontally. 我应该怎么做才能使其水平。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</div>
<div id="Comparing Energy" class="tab">
<h3 style="color:darkblue;"> Units for comparing energy (Gasoline and Enthanol) </h3>
<p class="Sansserif">BTU stands for British Thermal Unit, which is a unit of energy consumed by or delivered to a building. A BTU is defined as the amount of energy required to increase the temperature of 1 pound of water by 1 degree Fahrenheit, at normal atmospheric pressure. Energy consumption is expressed in BTU to allow for consumption comparisons among fuels that are measured in different units. [think-energy.net]</p>
<pre class="Sansserif"><span style="font-family:sans-serif;">Below are some BTU content of common energy units:
1 gallon of heating oil = 138,500 BTU
1 cubic foot of natural gas = 1,032 BTU
1 gallon of propane = 91,333 BTU
</span></pre>
<p class="Sansserif"><b>Let's compare the different energy amount between burn gasoline and ethanol</b></p>
<button onclick="expandable()"><b>Calculate</b></button>
<p id="inputinfo" class="Sansserif" style="display:none"> By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: </p>
<input id="btu" style="display:none" onkeyup="myDefault()">
<button id="energybutton" onclick="energy()" style="display:none;"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none;"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none;"><b>Simple</b></button>
<p id="numb2" style="display:none">
<input type=radio name=myradio onclick=document.getElementById("btu").value=1>Small<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=4>Medium<br>
<input type=radio name=myradio onclick=document.getElementById("btu").value=6>Large<br>
</p>
<p id="BTU"></p>
<p id="defaultValue"></p>
<script>
function energy() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById('btu').value;
j = x * 115000
t = x*76700
text = " "+x+" gallon of gas produces "+j+" BTU "+x+" gallon of ethanol produces "+t+" BTU";
document.getElementById("BTU").innerHTML = text;
}
function myDefault() {
var x = document.getElementById('btu').value;
if (x <= 10)
document.getElementById("defaultValue").innerHTML = "A typical small one is 5";
else if ((x > 10) && (x <= 20))
document.getElementById("defaultValue").innerHTML = "A typical medium one is 15";
else if (x > 20)
document.getElementById("defaultValue").innerHTML = "A typical large one is 25";
else
document.getElementById("defaultValue").innerHTML = " ";
}
function wizard() {
var v = prompt("By entering the amount of gasoline, this program will perform the appropriate calculations and display the equivalent amount of energy it produces in BTU. Please input a number: ");
if (v != null) {
document.getElementById('btu').value=v;
}
}
function simple() {
document.getElementById('btu').style.display='none';
document.getElementById('numb2').style.display='block';
}
function expandable() {
document.getElementById('inputinfo').style.display='block';
document.getElementById('btu').style.display='block';
document.getElementById('energybutton').style.display='block';
document.getElementById('wizardbutton').style.display='block';
document.getElementById('slidebutton').style.display='block';
}
</script>
</div>
</body>
</html>
4 个解决方案
解决方案1
3 2016-10-08 03:46:57
Hard to say without the rest of your code present, but probably some other CSS is causing the buttons to render as block elements instead of their standard inline display mode. 没有其余的代码就很难说，但是其他一些CSS可能导致按钮呈现为block元素，而不是标准的inline显示模式。
You could write the following CSS rule: 您可以编写以下CSS规则：
#energybutton, #wizardbutton, #slidebutton {
display: inline !important;
}
And it would probably solve it, but that seems a little ugly and the !important is undoubtedly overkill. 它可能会解决它，但这似乎有点丑陋，而!important无疑是过大的。 If you'd like to provide some more context I or someone else could provide a more elegant answer, but my hunch is this might work for you. 如果您想提供更多背景信息，我或其他人可以提供一个更优雅的答案，但是我的直觉是，这可能对您有用。
Edit: Seeing your exit with more code the issue is obvious- in your expandable method you are changing the buttons to display: block -- this is why they are displaying with breaks between then. 编辑：看到带有更多代码的退出问题很明显-在expandable方法中，您正在更改要display: block的按钮display: block这就是为什么它们在此之间显示中断的原因。 Instead, set the display property to inline or inline-block to achieve the desired effect. 而是将display属性设置为inline或inline-block以获得所需的效果。
Incidentally, it might be more robust to hide/show the buttons not directly by directly manipulating styles in JS, but instead by adding/removing a class with the desired associated CSS set. 顺便说一句，隐藏/显示按钮不是直接通过直接操作JS中的样式而是通过添加/删除具有所需关联CSS集的类来更健壮。
解决方案2
3 2016-10-08 03:48:52
display: inline-block;
这应该可以解决您的问题。
解决方案3
2 2016-10-08 03:46:34
将按钮的显示更改为“内联”而不是“无”。
解决方案4
0 2016-10-08 04:15:52
First I would place all the buttons within a div so you can property CSS them. 首先，我将所有按钮放在div中，以便可以对CSS进行属性设置。
<div class="title_of_div">
<button id="energybutton" onclick="energy()" style="display:none"><b>Submit</b></button>
<button id="wizardbutton" onclick="wizard()" style="display:none"><b>Wizard</b></button>
<button id="slidebutton" onclick="simple()" style="display: none"><b>Simple</b></button>
</div>
Then your CSS would look something like this: 然后，您的CSS将如下所示：
.title_of_div a {
display: block;
float: left;
height: 50px; <!-- You enter your own height -->
width: 100px; <!-- You enter your own width -->
margin-right: 10px;
text-align: center;
line-height: 50px;
text-decoration: none;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.