Question

我有两个表单元素，一个是vertical-dot-navigation（https://github.com/Robaum/Vertical-Dot-Navigation/commit/128bfe1c236139184）。我希望将其与表单元素<div>并排放置。

我在html中安排

<body>
<form  class="summarybackground" name="summary"  id="summary" style="height:550px;width:920px;overflow-y:auto;"  method="post">

  <div class="myBox" id="section"> 
    <div class="dotstyle dotstyle-scaleup">

    <ul>
       <li class="current"><a href="#">section1</a></li>
       <li><a href="#">section2</a></li>
       <li><a href="#">section3</a></li>
       <li><a href="#">section4</a></li>
       <li><a href="#">section5</a></li>       
    </ul>
    </div>


    <div class="col-sm-9">



      <div id="section1">    
        <h1>Landed</h1>

      </div>
      <div id="section2"> 
        <h1>Apartment</h1>

      </div>
      <div id="section3">         
        <h1>Condominium</h1>

      </div>

      <div id="section4">         
        <h1>Commercial</h1>

      </div> 

      <div id="section5">         
        <h1>Farm</h1>

      </div>

  </div>

</form>
</body>

如附图所示。问题是它们没有并排排列。

CSS代码如下所示，垂直点导航的component.css为here。

/*This is for summary view*/
.summarybackground {background-color:#3E3947;}
.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 800px;
height: 500px;
margin-bottom: 150%;
}
/* Scrollbar styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}

::-webkit-scrollbar-track {
border: 1px solid yellowgreen;
border-radius: 10px;
}

::-webkit-scrollbar-thumb {
background: yellowgreen;  
border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
background: #88ba1c;  
}

  div.col-sm-9 div {
      height: 500px;
      font-size: 28px;
  }
  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3 {color: #fff; background-color: #ff9800;}
  #section4 {color: #fff; background-color: #00bcd4;}
  #section5 {color: #fff; background-color: #009688;}



/*This is for summary view*/

Answer 1

也许试图在dotstyle类上放置绝对位置

.dotstyle{
    position:absolute;
    right:10px;
    top:100px

}

Answer 2

你可以将垂直点导航向右浮动。

.dotstyle { 
  float:right
 }

希望这可以解决您的问题，如果您仍有问题请在jsfiddle上分享工作演示。

Answer 3

你有div类.dotstyle没有浮动定义

如果你想正确设置你的css类，如下所示：

.dotstyle{ 
  float:right
 }

并排定位表单元素

3 个答案: