Question

我从API获取数据并使用HTML显示它。

＆＃13;

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

＆＃13;

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

＆＃13;

问题是这两个按钮都是一个在另一个上面。我想把它放在同一条线上。感谢。

Answer 1

你没有足够的宽度让两个按钮都适合。

我将宽度更改为200px;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

问题是按钮位于#dat div内，设置为仅100px宽。如果您希望它们位于同一条线的中心，请在#dat和width: 100% text-align: center之间添加一个新的div div。

#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

上面的方法略有不同，使用floatleft;和auto宽度。

将CSS类创建为可重用的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

您可以将不同div中的两个按钮分开，并在每个div中应用CSS来调整宽度。

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

此外，您可以使用Bootstrap将其保留为每个设备的内联。

Answer 5

我的建议如下：

请勿使用<u>标记为未链接的文字加下划线。这种视觉机制表示可点击的东西。将它用于不可操作的文本是不好的用户体验。
对数据项使用<ul>标记，而不是<p>标记。从语义上讲，信息是一个列表，而不是文本信息的段落。
对于<div>代码，请使用100％宽度，以便您的UI可以使用访问者视口进行扩展。随着视口大小的变化，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>

如何将按钮并排放在同一行？

5 个答案: