Question

很抱歉我造成的混乱。我没有粘贴我的代码，因为它是我的大任务的一部分。另外，我不确定代码的哪些部分会导致问题。所以我粘贴包含这三个按钮的代码部分

我想让这三个按钮水平显示（我认为这是默认的）。但是，该网站垂直显示它们。有人能告诉我背后的原因吗？我应该怎么做才能使它们水平。

<!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>

Answer 1

很难说没有其他代码存在，但可能其他一些CSS导致按钮呈现为block元素而不是标准inline显示模式。

您可以编写以下CSS规则：

#energybutton, #wizardbutton, #slidebutton {
    display: inline !important;
}

它可能会解决它，但这看起来有点难看，!important无疑是矫枉过正的。如果你想提供一些更多的背景信息，我或其他人可以提供更优雅的答案，但我的预感是这可能适合你。

编辑：通过更多代码查看退出问题是显而易见的 - 在expandable方法中，您将按钮更改为display: block - 这就是为什么它们之间会显示中断的原因。相反，请将display属性设置为inline或inline-block以获得所需效果。

顺便说一下，通过直接操作JS中的样式来隐藏/显示按钮可能更强大，而是通过添加/删除具有所需关联CSS集的类来实现。

Answer 2

display: inline-block;

这应该可以解决您的问题。

Answer 3

将按钮的显示更改为“内联”而不是“无”。

Answer 4

首先，我将所有按钮放在div中，以便您可以对它们进行属性化。

<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>

然后你的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;
}

html - 为什么我的三个按钮是垂直的而不是水平的？

4 个答案: