Wie erhalten Sie die Schaltflächen nebeneinander in der gleichen Zeile?

Question

Ich habe die Daten von einer API erhalten und mit HTML angezeigt.

#dat { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
} 
 

 
button { 
 
    margin-left: 20px; 
 
    display: inline; 
 
}

<h1><u>Weather App</u></h1> 
 
<div id="dat"> 
 
    <p id="data"></p> 
 
    <p id="temp"></p> 
 
    <p id="time"></p> 
 

 
    <button onclick="convertc()">imperial</button> 
 
    <button onclick="convertf()">metric</button> 
 
</div>

Das Problem ist, dass sowohl die Tasten sind über another.I es auf der gleichen Linie bringen wollen. Danke.

Answer 1

Sie haben nicht genügend Breite für beide Tasten erlaubt.

Ich änderte die Breite auf 200px;

#dat{ 
 
    position:absolute; 
 
    width:200px; 
 
    height:100px; 
 
    left:50%; 
 
    top:50%; 
 
    margin-left:-50px; 
 
    margin-top:-50px; 
 
} 
 
button{ 
 
margin-left:20px; 
 
    display:inline; 
 
}

<h1><u>Weather App</u></h1> 
 
    <div id="dat"> 
 
    <p id="data"> 
 
    </p> 
 
    <p id="temp"> 
 
    </p> 
 
    <p id="time"> 
 
    </p> 
 

 
    <button onclick="convertc()">imperial</button> 
 
    <button onclick="convertf()">metric</button> 
 
</div>

Answer 2

Das Problem ist, die Tasten sind im Inneren des #dat div, die nur 100px breit sein gesetzt. Wenn Sie möchten, dass sie in derselben Zeile zentriert sind, fügen Sie ein neues div außerhalb div mit width: 100% und text-align: center hinzu.

#dat { 
 
    position: absolute; 
 
    width: 100px; 
 
    height: 100px; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
} 
 

 
button { 
 
    margin-left: 20px; 
 
    display: inline; 
 
} 
 

 
#buttondiv { 
 
    width: 100%; 
 
    text-align: center; 
 
}

<h1><u>Weather App</u></h1> 
 
<div id="dat"> 
 
    <p id="data"> 
 
    </p> 
 
    <p id="temp"> 
 
    </p> 
 
    <p id="time"> 
 
    </p> 
 
</div> 
 
<div id="buttondiv"> 
 
    <button onclick="convertc()">imperial</button> 
 
    <button onclick="convertf()">metric</button> 
 
</div>

Answer 3

etwas anderer Ansatz dann oben, floatleft; und auto Breite verwendet wird.

Erstellt CSS-Klassen als wiederverwendbare.

#dat { 
 
    position: absolute; 
 
    height: 100px; 
 
    left: 50%; 
 
    top: 50%; 
 
    margin-left: -50px; 
 
    margin-top: -50px; 
 
    width: auto; 
 
} 
 

 
.pull-left { 
 
    float:left; 
 
} 
 

 
.ml-10 { 
 
    margin-left: 10px; 
 
}

<h1><u>Weather App</u></h1> 
 
<div id="dat"> 
 
    <p id="data"></p> 
 
    <p id="temp"></p> 
 
    <p id="time"></p> 
 
    
 
    <button onclick="convertc()" class="pull-left">imperial</button> 
 
    <button onclick="convertf()" class="pull-left ml-10">metric</button> 
 
    
 
</div>

Answer 4

Sie können zwei Tasten in verschiedenen div und anwenden CSS in jedem div Breite anzupassen trennen.

<div> 
<button onclick="convertc()">imperial</button> 
</div> 
<div> 
<button onclick="convertf()">metric</button> 
</div> 

Neben können Sie Bootstrap verwenden sie für alle Geräte inline zu halten.

Answer 5

wäre Meine Vorschläge wie folgt:

1. nicht die <u> Tag für unterstrichen unlinked Text anwenden. Dieser visuelle Mechanismus bedeutet etwas anklickbares. Die Verwendung für nicht umsetzbaren Text ist schlecht UX.
2. Verwenden Sie ein <ul>-Tag für die Datenelemente anstelle von <p> Tags. Semantisch ist die Information eine Liste und keine Absätze von Textinformationen.
3. Verwenden Sie für die <div> Tags eine Breite von 100%, sodass Ihre Benutzeroberfläche mit dem Besucher-Ansichtsfenster skalierbar ist. Das CSS zentriert die Schaltflächen weiterhin, wenn sich die Ansichtsfenstergröße ändert.

Siehe den folgenden Code:

#dat { 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 

 
#dat ul 
 
{ 
 
    list-style:none; 
 
    margin:10px 0; 
 
    padding:0; 
 
} 
 

 
#dat .btns 
 
{ 
 
    width:100%; 
 
    text-align:center; 
 
} 
 

 
#dat .btns button { 
 
    display: inline; 
 
}

<h1>Weather App</h1> 
 
<div id="dat"> 
 
    <ul> 
 
    <li id="data"></li> 
 
    <li id="temp"></li> 
 
    <li id="time"></li> 
 
    </ul> 
 
    <div class="btns"> 
 
    <button onclick="convertc()">imperial</button> 
 
    <button onclick="convertf()">metric</button> 
 
    </div> 
 
</div>