css按钮位于工具栏下方

时间：2015-07-28 11:30:04

标签： javascript html css css3

我有这个工具栏，它有一些按钮，并且它们之间有一个sperator，但由于某些原因，当我添加分隔符时，按钮会变得不稳定。

这是一个显示问题的片段（srry for messy css code，但我使用scss而app.css是hughe，所以只是拿了一些东西来显示需要的东西）

main #related {
  min-width: 200px;
  padding-top: 80px;
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: -1; }
  main #related.ng-enter {
-webkit-animation: slideInLeft 1s;
-moz-animation: slideInLeft 1s;
-ms-animation: slideInLeft 1s;
animation: slideInLeft 1s; }
  main #related.ng-leave {
-webkit-animation: slideOutLeft 1s;
-moz-animation: slideOutLeft 1s;
-ms-animation: slideOutLeft 1s;
animation: slideOutLeft 1s; }
main #page-detail {
  padding-left: 0;
  padding-right: 0;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -ms-transition: 1s;
  transition: 1s; }
  main #page-detail #toolbar {
width: 100%;
background-color: white;
border-bottom: 1px solid #e5e5e5;
height: 56px;
margin: 0; }
main #page-detail #toolbar .btn, main #page-detail #toolbar .btn-large {
  padding-left: 10px;
  padding-right: 10px;
  margin: 10px 10px; }
main #page-detail #toolbar .separator {
  height: 56px;
  display: inline-block;
  margin: 0 10px;
  border-right: 1px solid #e5e5e5; }
  main #page-detail #content #editor {
padding: 20px 50px; }
main #page-detail #content #editor ul {
  list-style: initial;
  margin: initial;
  padding: 0 0 0 40px; }
main #page-detail #content #editor li {
  display: list-item;
  list-style-type: disc; }

.row {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px; }
  .row:after {
content: "";
display: table;
clear: both; }
  .row .col {
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.75rem; }
.row .col.s1 {
  width: 8.33333%;
  margin-left: 0; }
.row .col.s2 {
  width: 16.66667%;
  margin-left: 0; }
.row .col.s3 {
  width: 25%;
  margin-left: 0; }
.row .col.s4 {
  width: 33.33333%;
  margin-left: 0; }
.row .col.s5 {
  width: 41.66667%;
  margin-left: 0; }
.row .col.s6 {
  width: 50%;
  margin-left: 0; }
.row .col.s7 {
  width: 58.33333%;
  margin-left: 0; }
.row .col.s8 {
  width: 66.66667%;
  margin-left: 0; }
.row .col.s9 {
  width: 75%;
  margin-left: 0; }
.row .col.s10 {
  width: 83.33333%;
  margin-left: 0; }
.row .col.s11 {
  width: 91.66667%;
  margin-left: 0; }
.row .col.s12 {
  width: 100%;
  margin-left: 0; }
.row .col.offset-s1 {
  margin-left: 8.33333%; }
.row .col.offset-s2 {
  margin-left: 16.66667%; }
.row .col.offset-s3 {
  margin-left: 25%; }
.row .col.offset-s4 {
  margin-left: 33.33333%; }
.row .col.offset-s5 {
  margin-left: 41.66667%; }
.row .col.offset-s6 {
  margin-left: 50%; }
.row .col.offset-s7 {
  margin-left: 58.33333%; }
.row .col.offset-s8 {
  margin-left: 66.66667%; }
.row .col.offset-s9 {
  margin-left: 75%; }
.row .col.offset-s10 {
  margin-left: 83.33333%; }
.row .col.offset-s11 {
  margin-left: 91.66667%; }
.row .col.offset-s12 {
  margin-left: 100%; }
@media only screen and (min-width: 601px) {
  .row .col.m1 {
    width: 8.33333%;
    margin-left: 0; }
  .row .col.m2 {
    width: 16.66667%;
    margin-left: 0; }
  .row .col.m3 {
    width: 25%;
    margin-left: 0; }
  .row .col.m4 {
    width: 33.33333%;
    margin-left: 0; }
  .row .col.m5 {
    width: 41.66667%;
    margin-left: 0; }
  .row .col.m6 {
    width: 50%;
    margin-left: 0; }
  .row .col.m7 {
    width: 58.33333%;
    margin-left: 0; }
  .row .col.m8 {
    width: 66.66667%;
    margin-left: 0; }
  .row .col.m9 {
    width: 75%;
    margin-left: 0; }
  .row .col.m10 {
    width: 83.33333%;
    margin-left: 0; }
  .row .col.m11 {
    width: 91.66667%;
    margin-left: 0; }
  .row .col.m12 {
    width: 100%;
    margin-left: 0; }
  .row .col.offset-m1 {
    margin-left: 8.33333%; }
  .row .col.offset-m2 {
    margin-left: 16.66667%; }
  .row .col.offset-m3 {
    margin-left: 25%; }
  .row .col.offset-m4 {
    margin-left: 33.33333%; }
  .row .col.offset-m5 {
    margin-left: 41.66667%; }
  .row .col.offset-m6 {
    margin-left: 50%; }
  .row .col.offset-m7 {
    margin-left: 58.33333%; }
  .row .col.offset-m8 {
    margin-left: 66.66667%; }
  .row .col.offset-m9 {
    margin-left: 75%; }
  .row .col.offset-m10 {
    margin-left: 83.33333%; }
  .row .col.offset-m11 {
    margin-left: 91.66667%; }
  .row .col.offset-m12 {
    margin-left: 100%; } }
@media only screen and (min-width: 993px) {
  .row .col.l1 {
    width: 8.33333%;
    margin-left: 0; }
  .row .col.l2 {
    width: 16.66667%;
    margin-left: 0; }
  .row .col.l3 {
    width: 25%;
    margin-left: 0; }
  .row .col.l4 {
    width: 33.33333%;
    margin-left: 0; }
  .row .col.l5 {
    width: 41.66667%;
    margin-left: 0; }
  .row .col.l6 {
    width: 50%;
    margin-left: 0; }
  .row .col.l7 {
    width: 58.33333%;
    margin-left: 0; }
  .row .col.l8 {
    width: 66.66667%;
    margin-left: 0; }
  .row .col.l9 {
    width: 75%;
    margin-left: 0; }
  .row .col.l10 {
    width: 83.33333%;
    margin-left: 0; }
  .row .col.l11 {
    width: 91.66667%;
    margin-left: 0; }
  .row .col.l12 {
    width: 100%;
    margin-left: 0; }
  .row .col.offset-l1 {
    margin-left: 8.33333%; }
  .row .col.offset-l2 {
    margin-left: 16.66667%; }
  .row .col.offset-l3 {
    margin-left: 25%; }
  .row .col.offset-l4 {
    margin-left: 33.33333%; }
  .row .col.offset-l5 {
    margin-left: 41.66667%; }
  .row .col.offset-l6 {
    margin-left: 50%; }
  .row .col.offset-l7 {
    margin-left: 58.33333%; }
  .row .col.offset-l8 {
    margin-left: 66.66667%; }
  .row .col.offset-l9 {
    margin-left: 75%; }
  .row .col.offset-l10 {
    margin-left: 83.33333%; }
  .row .col.offset-l11 {
    margin-left: 91.66667%; }
  .row .col.offset-l12 {
    margin-left: 100%; } }

.btn, .btn-large, .btn-flat {
  border: none;
  border-radius: 2px;
  display: inline-block;
  height: 36px;
  line-height: 36px;
  outline: 0;
  padding: 0 2rem;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent; }

.btn.disabled, .disabled.btn-large, .btn-floating.disabled, .btn-large.disabled, .btn:disabled, .btn-large:disabled, .btn-large:disabled, .btn-floating:disabled {
  background-color: #DFDFDF !important;
  box-shadow: none;
  color: #9F9F9F !important;
  cursor: default; }
  .btn.disabled *, .disabled.btn-large *, .btn-floating.disabled *, .btn-large.disabled *, .btn:disabled *, .btn-large:disabled *, .btn-large:disabled *, .btn-floating:disabled * {
pointer-events: none; }
  .btn.disabled:hover, .disabled.btn-large:hover, .btn-floating.disabled:hover, .btn-large.disabled:hover, .btn:disabled:hover, .btn-large:disabled:hover, .btn-large:disabled:hover, .btn-floating:disabled:hover {
background-color: #DFDFDF;
color: #9F9F9F; }

.btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i {
  font-size: 1.3rem;
  line-height: inherit; }

.btn, .btn-large {
  text-decoration: none;
  color: #fff;
  background-color: #fb4400;
  text-align: center;
  letter-spacing: .5px;
  -webkit-transition: 0.2s ease-out;
  -moz-transition: 0.2s ease-out;
  -o-transition: 0.2s ease-out;
  -ms-transition: 0.2s ease-out;
  transition: 0.2s ease-out;
  cursor: pointer; }
  .btn:hover, .btn-large:hover {
background-color: #ff5516; }

.btn-floating {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 37px;
  height: 37px;
  line-height: 37px;
  padding: 0;
  background-color: #fb4400;
  border-radius: 50%;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle; }
  .btn-floating i {
width: inherit;
display: inline-block;
text-align: center;
color: #fff;
font-size: 1.6rem;
line-height: 37px; }
  .btn-floating:before {
border-radius: 0; }
  .btn-floating.btn-large {
width: 55.5px;
height: 55.5px; }
.btn-floating.btn-large i {
  line-height: 55.5px; }

button.btn-floating {
  border: none; }

.fixed-action-btn {
  position: fixed;
  right: 23px;
  bottom: 23px;
  padding-top: 15px;
  margin-bottom: 0;
  z-index: 998; }
  .fixed-action-btn ul {
left: 0;
right: 0;
text-align: center;
position: absolute;
bottom: 64px;
margin: 0; }
.fixed-action-btn ul li {
  margin-bottom: 15px; }
.fixed-action-btn ul a.btn-floating {
  opacity: 0; }

.btn-flat {
  box-shadow: none;
  background-color: transparent;
  color: #343434;
  cursor: pointer; }
  .btn-flat.disabled {
color: #b3b3b3;
cursor: default; }

.btn-large {
  height: 54px;
  line-height: 56px; }
  .btn-large i {
font-size: 1.6rem; }

.btn-block {
  display: block; }

.dropdown-content {
  background-color: #fff;
  margin: 0;
  display: none;
  min-width: 100px;
  max-height: 650px;
  overflow-y: auto;
  opacity: 0;
  position: absolute;
  z-index: 999;
  will-change: width, height; }
  .dropdown-content li {
clear: both;
color: rgba(0, 0, 0, 0.87);
cursor: pointer;
line-height: 1.5rem;
width: 100%;
text-align: left;
text-transform: none; }
.dropdown-content li:hover, .dropdown-content li.active {
  background-color: #eee; }
.dropdown-content li > a, .dropdown-content li > span {
  font-size: 1.2rem;
  color: #fb4400;
  display: block;
  padding: 1rem 1rem; }
.dropdown-content li > a > i {
  height: inherit;
  line-height: inherit; }

.black {
  background-color: #000000 !important; }

.black-text {
  color: #000000 !important; }

.white {
  background-color: #FFFFFF !important; }

.white-text {
  color: #FFFFFF !important; }

.transparent {
  background-color: transparent !important; }

.transparent-text {
  color: transparent !important; }
<main>
  <div class="row">


    <div class="col s2 black white-text" id="related" ng-if="!hideRelated">
      <h4>Side bar</h4>
    </div>

    <div class="col s12 m10 offset-m2" id="page-detail">

      <div class="row" id="toolbar">
        <a class="btn btn-flat"><i class="material-icons mdi-navigation-close"></i></a>
        <span class="separator"></span>
        <a class="btn">Edit</i></a>

      </div>
      <div class="row" id="content">

      </div>

    </div>
  </div>
</main>

3 个答案:

答案 0 :(得分：1)

将垂直对齐设置为除基线以外的任何内容（包括行间距）

public static void main(String[] args) {
    J48TreeWrapper wrapper = new J48TreeWrapper(new J48Tree());
    Visualization visualization = new Visualization();
    visualization.setGraphable(wrapper);
    visualization.graph();
}

答案 1 :(得分：0)

我不确定你的意思是什么。你可以改变CSS：

main #page-detail #toolbar .separator {
  /* height: 56px; */
  /* display: inline-block; */
  margin: 0 10px;
  border-right: 1px solid #e5e5e5;
}

https://jsfiddle.net/wksL819n/

答案 2 :(得分：0)

只需从display: inline-block;移除main #page-detail #toolbar .separator：

main #page-detail #toolbar .separator {
  height: 56px;
  margin: 0 10px;
  border-right: 1px solid #e5e5e5; }
相关问题
最新问题