gpt4 book ai didi

css - 并排定位表单元素

转载 作者:太空宇宙 更新时间:2023-11-04 10:54:37 24 4
gpt4 key购买 nike

我有两个表单元素,一个是 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>

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

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

最佳答案

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

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

}

关于css - 并排定位表单元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34739479/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com