同じ行にボタンを並べる方法は？

Question

私はAPIからデータを取得し、HTMLを使って表示していました。

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

問題は、ボタンの両方がanother.I上記1であるということです同じ行にそれを持って帰りたいと思います。おかげさまで

Answer 1

両方のボタンに適した幅がありませんでした。

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

問題は、ボタンが唯一の100pxに広く設定されて#dat divの内側にあります。同じ行の中央に配置する場合は、#dat divの外にwidth: 100%とtext-align: centerの新しいdiv を追加します。 floatleft;とauto幅を使用し、次いで上記

#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

わずかに異なるアプローチ。

再利用可能なCSSクラスを作成しました。

#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

あなたは別のdivの中で、あなたの2つのボタンが分離して幅を調整するために、それぞれのdivにCSSを適用することができます。

さらに、Bootstrapを使用すると、すべてのデバイスでインラインにすることができます。次のように

Answer 5

私の提案は次のようになります。

1. リンクされていないテキストに下線を引くため<u>タグを使用しないでください。この視覚的な仕組みは、クリック可能なものを意味します。実行不可能なテキストに使用すると、UXが悪くなります。
2. <p>タグではなく、データ項目に<ul>タグを使用します。意味的に情報はリストであり、テキスト情報の段落ではありません。
3. <div>タグの場合は、訪問者のビューポートに合わせてUIを拡大できるように100％幅を使用してください。ビューポートのサイズが変わると、CSSはボタンを中央に配置し続けます。

次のコードを参照してください。

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