Javascript 对齐“选择零部件”旁边的圆形按钮_Javascript_Css_Vue.js

Javascript 对齐“选择零部件”旁边的圆形按钮

javascript css vue.js

Javascript 对齐“选择零部件”旁边的圆形按钮,javascript,css,vue.js,Javascript,Css,Vue.js,我编写了这段代码，从后端api提取json并在vue中填充select组件。我想在“选择”组件旁边添加一个“重新加载”按钮 <!DOCTYPE html> <html lang="en"> <title>Test page app</title> <meta charset="utf-8"> <style> .round-button { width:3%; // controls the

我编写了这段代码，从后端api提取json并在vue中填充select组件。我想在“选择”组件旁边添加一个“重新加载”按钮

 <!DOCTYPE html>
 <html lang="en">
 <title>Test page app</title>
 <meta charset="utf-8">
   <style>

   .round-button {
       width:3%; // controls the size of button
   }
   .round-button-circle {
      width: 100%;
      height:0;
      padding-bottom: 100%;
      border-radius: 50%;
      line-height:50px;
      border:1px solid #cfdcec;
      overflow:hidden;
      background: #4679BD;
      box-shadow: 0 0 5px gray;
   }
   .round-button-circle:hover {
      background:#30588e;
   }

   .round-button img {
      display: block;
      width: 90%; // control image size
      padding: 24%; // control image alignment
      padding-right: 50%;
      height: auto;
   }

   </style>

   <script src="static/vendor/vue.js"></script>
   <script src="static/vendor/axios.min.js"></script>
</head>
<body>
<div id="select">
   <form>
<select v-model="selected" v-on:change.once="executeLoader('tests', $event)"># v-bind:disabled="isRunning">
<option disabled selected>Please Select One</option>
   <option></option>
<option v-for="n in projects" :value="n">
{{n.id}} : {{ n.name }}
</option>
</select>
      <div class="round-button">
         <div class="round-button-circle">
      <a href="#" class="round-button">
<img src="images/leftarrow.png" alt="Reload" title="Reload" />
</a></div>
         </div>
<h3>Selected: {{ selected.name }} </h3>
      </form>

</div>

<script>
new Vue({
   el: "#select",
   data: {
      projects: [],
      selected: "Please Select One",
      isRunning: false
   },
   methods : {
      executeLoader: function(t, event){

      alert('Query "'+ this.selected.name +
         '" Dropdown: "' + t + '"');

         if (!this.selected){
            console.log("did not submitted");
         } else {
            this.isRunning = true;
            }
         }
      },
   mounted() {
   axios.get("projects.json")
   //axios.get("http://127.0.0.1:5050/api/images?filter=placeholder")
   .then(response => {
         this.projects = response.data.projects
      })
   }
});
</script>
    </body>
</html>

但是我创建的图像按钮将转到下一行，而不是直接显示在div旁边。

在css中尝试以下操作：

.round-button {
  display: inline-block;
}

新版本：

.round-button {
  display: inline-flex;
  vertical-align: middle;
}

在css中尝试以下操作：

.round-button {
  display: inline-block;
}

新版本：

.round-button {
  display: inline-flex;
  vertical-align: middle;
}

请提供一个完整的例子。特别是HTMLI已经更新，HTMLPL提供了一个完整的例子。尤其是HTMLI更新了html@Ciastopiekarz，我刚刚添加了新的解决方案。请尝试。显示：内联块；使用垂直对齐：中间对齐；抓得好，兄弟。希望有帮助。我还增加了宽度：15px；在我的帖子中，我有3%，因为我希望大小与下拉列表的大小相匹配height@Ciastopiekarz，我刚刚添加了新的解决方案。请尝试。显示：内联块；使用垂直对齐：中间对齐；抓得好，兄弟。希望有帮助。我还增加了宽度：15px；在我的帖子中，我有3%，因为我希望大小与下拉列表的高度相匹配