我目前有以下代码。
圆形按钮基本上是导航按钮。第二个div是我有一个可折叠列表的地方。
我希望列表位于导航的右侧。
我试图包装div并且还使用float作为左侧，由于某种原因它仍然无效。如果有人可以协助？
html, body {
background-color: #fff;
color: rgba(255, 43, 62, 0.84);
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 10px;
}
.links > a {
color: #ffffff;
padding-top: 0;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 100px;
font-size: 14px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.round-button {
width:8%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
margin: 10%;
border-radius: 110%;
border:3px solid #56660d;
overflow:hidden;
background: #abc729;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #56660d;
}
.round-button a {
display:inline-block;
float:left;
width:100%;
padding-top:45%;
padding-bottom:50%;
line-height:1em;
text-align:center;
color: #ffffff;
font-family:Verdana;
font-size:0.70em;
font-weight:bold;
text-decoration:none;
position: relative;
}<div class="circle-flex-center cirlce-position-ref circle-full-height">
<div class="round-button">
<div class="round-button-circle">
<a href="student-personaldetails" class="round-button">Personal & Placement Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-tutordetails" class="round-button">Tutor Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-placementassignment" class="round-button">Assignments & Examples</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-markscheme" class="round-button">Mark Scheme</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-submission" class="round-button">Submission</a>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseone" data-toggle="collapse" data-parent="#accordion">
Monthly Reflection
</a>
</h4>
</div>
<div id="collapseone" class="panel-collapse collapse ">
<div class="panel-body">
sjfhdkjs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
Reflection Example
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
adfjkldsf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsethree" data-toggle="collapse" data-parent="#accordion">
Tutor Visits
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
dilfsklsdgs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefour" data-toggle="collapse" data-parent="#accordion">
Reports
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
sfjksdf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefive" data-toggle="collapse" data-parent="#accordion">
Report Example
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
difks;ldsf
</div>
</div>
</div>
</div>
答案 0 :(得分：0)
稍微重组了一下你的CSS。我希望有所帮助。
html, body {
background-color: #fff;
color: rgba(255, 43, 62, 0.84);
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 10px;
}
.circle-flex-center{
width: 80px;
}
.round-button{
text-align: center;
width: 65px;
height: 65px;
padding: 15px;
margin: 5px;
border:3px solid #56660d;
background-color: #abc729;
border-radius: 110%;
box-shadow: 0 0 3px gray;
float: left;
}
.round-button a{
padding: 5px;
line-height:1em;
color: #ffffff;
font-family:Verdana;
font-size:0.60em;
font-weight:bold;
text-decoration:none;
}
.round-button:hover{
background: #56660d;
}
.panel-group{
float: right;
margin-top: -65%;
}
.links > a {
color: #ffffff;
padding-top: 0;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 100px;
font-size: 14px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}<div class="circle-flex-center cirlce-position-ref circle-full-height">
<div class="round-button">
<div class="round-button-circle">
<a href="student-personaldetails" >Personal & Placement Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-tutordetails" >Tutor Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-placementassignment" >Assignments & Examples</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-markscheme" >Mark Scheme</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-submission" >Submission</a>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseone" data-toggle="collapse" data-parent="#accordion">
Monthly Reflection
</a>
</h4>
</div>
<div id="collapseone" class="panel-collapse collapse ">
<div class="panel-body">
sjfhdkjs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
Reflection Example
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
adfjkldsf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsethree" data-toggle="collapse" data-parent="#accordion">
Tutor Visits
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
dilfsklsdgs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefour" data-toggle="collapse" data-parent="#accordion">
Reports
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
sfjksdf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefive" data-toggle="collapse" data-parent="#accordion">
Report Example
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
difks;ldsf
</div>
</div>
</div>
</div>