Question

你好，我为我的网站制作了一些进度条..我想把它移到正确的位置..注意我不想使用float: right;因为不能正常工作..我想在标准上移动它右边的像素margin-right做我的工作，但内联块无法帮助我，请给我一个解决方案来解决我的问题因为我非常不高兴！：（

例如： http://codepen.io/anon/pen/yYNoVZ?editors=110

Answer 1

添加一个包含所有图形的父标记（图形容器），并按如下方式将浮点数应用于它。

<div class="container">
  <div class="graph-container">
    <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    </div>  
  </div>
  <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>  
  </div>
  <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
  </div>  
  </div>
   <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
    </div>  
  </div>
     <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
    </div>  
  </div>
  </div>
</div>

body {
  background-color: #1D1F20;
  //background-color: #d3d3d3;
}
.container {
  margin-top: 150px;
}
.graph-container{
    float: right;
}
.vertical {
  display: inline-block;
  width: 100px;
  height: 76px;
  vertical-align: top;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

Answer 2

真的不清楚什么应该移动任何多少，但你可以添加

.container {
  margin-top: 150px;
  text-align: right; /* this */
}

body {
  background-color: black !important;
}
.container {
  margin-top: 150px;
  text-align: right;
}
.vertical {
  display: inline-block;
  width: 100px;
  height: 76px;
  vertical-align: top;
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 40%;">
    </div>  
  </div>
  <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  </div>  
  </div>
  <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
  </div>  
  </div>
   <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100" style="width: 95%;">
    </div>  
  </div>
     <div class="progress vertical">
    <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100" style="width: 10%;">
    </div>  
  </div>
</div>

如何在内联块上留下余量我想移动整个进度条？

2 个答案: