html - 图像旁边按钮的位置

Question

我有一张图片和 5 个按钮，我想将 放置在图片的右上 一侧，按钮应该在另一个之上。目前按钮位于图像的右下角并排成一排。

function pictureChange(imgId, path) {
  document.getElementById(imgId).src = path;
}

p {
  display: inline-block;
}

<img id="scene1" src="images/scene1/scene1-4dof.png">

<p>
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
</p>
<p>
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
</p>
<p>
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
</p>
<p>
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
</p>
<p>
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</p>

Answer 1

function pictureChange(imgId,path) {
  document.getElementById(imgId).src=path;
}

.sid {
  display: inline-block;
  vertical-align: top;
}

img {
  width:200px;
  height:200px;
}

.sid input {
  display: block;
}

<img class="sid" id="scene1" src="http://via.placeholder.com/200x200">
<!---->
<div class="sid">
  <input type="button" value="4DOF" onclick="pictureChange('scene1','images/scene1/scene1-4dof.png')">
  <input type="button" value="6DOF" onclick="pictureChange('scene1','images/scene1/scene1-6dof.png')">
  <input type="button" value="6DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-6dof-pca.png')">
  <input type="button" value="7DOF" onclick="pictureChange('scene1','images/scene1/scene1-7dof.png')">
  <input type="button" value="7DOF-PCA" onclick="pictureChange('scene1','images/scene1/scene1-7dof-pca.png')">
</div>

我所做的是添加 display: inline-block;到图像和 div“我添加以包含输入”

这<!---->对于 inline inline-block 中的行为' 显示元素之间的任何间距 '

还有vertical-align: top;对于右上角的顶部