html - Warum sind meine drei Tasten vertikal statt horizontal?

-1

Sorry für das verwirrende ich verursacht habe. Ich habe meinen Code nicht eingefügt, weil dies Teil meiner großen Aufgabe ist. Ich bin mir auch nicht sicher, welche Teile des Codes das Problem verursachen. Also füge ich die Teile des Codes, der diese drei Tasten enthälthtml - Warum sind meine drei Tasten vertikal statt horizontal?

Ich möchte diese drei Tastenanzeige horizontal machen (was ich denke, ist Standard). Die Website zeigt sie jedoch vertikal an. Kann mir jemand den Grund dafür nennen? Was soll ich tun, um sie horizontal zu machen?

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

Quelle

2016-10-08 Sijie Shao

Vielleicht anderen CSS-Stilattribute? –

Warum stellen so viele Leute Fragen mit irgendeinem oder keinem Code? Es ist nicht hilfreich. –

Wie sieht der Code aus, der sie zeigt (ihre Anzeigeeigenschaft ändern)? – LGSon

Ändern Sie die Anzeige Ihrer Schaltflächen auf "Inline" anstelle von "None".

Quelle

2016-10-08 03:46:34 JTrixx16

Schwer zu sagen, ohne den Rest Ihres Codes vorhanden, aber wahrscheinlich einige andere CSS verursacht die Schaltflächen als block Elemente anstelle ihrer Standard inline Anzeigemodus zu rendern.

Sie könnten die folgende CSS-Regel schreiben:

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

Und es wäre es wahrscheinlich zu lösen, aber das scheint ein wenig hässlich und die !important ist zweifellos übertrieben. Wenn Sie etwas mehr Kontext zur Verfügung stellen möchten, könnte ich oder jemand anderes eine elegantere Antwort liefern, aber meine Ahnung ist, dass dies für Sie arbeiten könnte.

Edit: Sehen Sie Ihre Ausfahrt mit mehr Code ist die Frage obvious- in Ihrem expandable Methode Sie die Tasten display: block verändern - das ist, warum sie mit Pausen zwischen den dann angezeigt wird. Setzen Sie stattdessen die Eigenschaft display auf inline oder inline-block, um den gewünschten Effekt zu erzielen.

Übrigens, es könnte robuster sein, die Schaltflächen nicht direkt zu verbergen/anzeigen, indem Sie Styles in JS direkt bearbeiten, sondern stattdessen eine Klasse mit dem gewünschten zugeordneten CSS-Set hinzufügen/entfernen.

Quelle

2016-10-08 03:46:57

display: inline-block;

Dies sollte Ihr Problem lösen.

Quelle

2016-10-08 03:48:52

Zuerst würde ich alle Schaltflächen innerhalb einer div platzieren, so können Sie Eigenschaft CSS ihnen.

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

Dann würde dein CSS wie folgt aussehen:

.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; 
}

Quelle

2016-10-08 04:15:52

Warum wählen Sie '' aber untergeordnete Elemente sind '

html - Warum sind meine drei Tasten vertikal statt horizontal?

Antwort

Verwandte Themen