html - 爲什麼我的三個按鈕是垂直而不是水平的？

-1

對不起，我造成了困惑。我沒有粘貼我的代碼，因爲它是我重要任務的一部分。另外，我不確定哪部分代碼會導致問題。所以我粘貼包含這三個按鈕的代碼部分html - 爲什麼我的三個按鈕是垂直而不是水平的？

我想使這三個按鈕水平顯示（我認爲這是默認設置）。但是，該網站垂直顯示它們。有誰能告訴我背後的原因嗎？我該怎麼做才能使它們水平。

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

來源

2016-10-08 Sijie Shao

也許其他CSS樣式屬性？ –

爲什麼很多人用一些或者沒有代碼來提問？這沒有幫助。 –

顯示它們的代碼（更改其顯示屬性）是怎樣的？ – LGSon

將按鈕的顯示更改爲「內聯」而不是「無」。

來源

2016-10-08 03:46:34 JTrixx16

很難說沒有其他代碼存在，但可能其他一些CSS導致按鈕呈現爲block元素而不是其標準的inline顯示模式。

你可以寫下面的CSS規則：

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

，它可能會解決這個問題，但似乎有點難看和!important無疑是矯枉過正。如果您想提供更多的背景信息，我或其他人可以提供更優雅的答案，但是我的直覺是這可能適合您。

編輯：看到你的退出與更多的代碼的問題是obvious-在expandable方法要更改按鈕display: block - 這就是爲什麼他們有那麼之間的中斷顯示。相反，將display屬性設置爲inline或inline-block以實現所需的效果。順便說一下，它可能更健壯，隱藏/顯示按鈕不是直接通過直接操作JS中的樣式，而是通過添加/刪除具有所需的關聯CSS集合的類。

來源

2016-10-08 03:46:57

display: inline-block;

這應該可以解決您的問題。

來源

2016-10-08 03:48:52

首先，我會將所有的按鈕放在一個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>

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

來源

2016-10-08 04:15:52

爲什麼選擇''但是子元素是'

html - 爲什麼我的三個按鈕是垂直而不是水平的？

回答

相關問題