使用<div>对齐按钮

Question

我是HTML / CSS的新手，我目前正在尝试将三个不同的按钮与另一个<p>对齐。

这是我的代码：

＆＃13;

＆＃13;

.weekNav {
  font-size: 20px;
  position: relative;
  padding-left: 50%;
  padding: 0px 0px 0px 16px !important;
  border: none;
  vertical-align: middle;
  height: 48px;
  line-height: 48px;
}

.weekForward {
  max-width: 22%!important;
  min-width: 20%!important;
  max-height: 15%!important;
  min-height: 15%!important;
  padding: 0px 0px 0px 0px !important;
  border: none;
  height: 40px;
  line-height: 48px;
  float: right;
  display: inline-block;
}

.weekBackward {
  max-width: 22%!important;
  min-width: 20%!important;
  max-height: 15%!important;
  min-height: 15%!important;
  padding: 0px 0px 0px 0px !important;
  border: none;
  height: 40px;
  line-height: 48px;
  float: left;
  display: inline-block;
}

.weekCurrent {
  max-width: 22%!important;
  min-width: 20%!important;
  max-height: 10%!important;
  min-height: 10%!important;
  padding: 0px 0px 0px 0px !important;
  border: none;
  height: 35px;
  line-height: 48px;
  vertical-align: middle;
  display: inline-block;
}

＆＃13;

<div class="weekNav">
  <p id="week"></p>
</div>

<div id="navBtns">
  <button type="button" class="weekForward" id="plus" value="Forward">
            <span class="glyphicon glyphicon-forward"></span>
        </button>

  <button type="button" class="weekBackward" id="minus" value="Backward">
            <span class="glyphicon glyphicon-backward"></span>
        </button>

  <button type="button" class="weekCurrent" id="curr" value="Current">
           <span class="glyphicon glyphicon-arrow-up"></span>
       </button>
</div>

＆＃13;

＆＃13;

＆＃13;

这就是目前的情况;

因此，我们的想法是将{strong>＆lt;＆lt; / ＆gt;＆gt;＆gt; 按钮与id="week"和<本周底的em>向上箭头按钮。

是否有快速有效的方法来实现这一目标？

Answer 1

.weekForward,.weekBackward,.weekCurrent{  
    max-width: 22%;
    min-width: 22%;
    max-height: 15%;
    min-height: 15%;
    border: none;    
    height: 40px;
}

<div id="navBtns">
    <button type="button" class="weekForward" id="plus" value="Forward">
        <span class="glyphicon glyphicon-forward"> << </span>
    </button>

    <button type="button" class="weekBackward" id="minus" value="Backward">
        <span class="glyphicon glyphicon-backward">/</span>
    </button>

   <button type="button" class="weekCurrent" id="curr" value="Current">
       <span class="glyphicon glyphicon-arrow-up"> >> </span>
   </button>
</div>

Answer 2

你可以将p和中心箭头按钮放在一个div中，然后使用float来对齐三个div。像这样的东西：

＆＃13;

＆＃13;

#weekNav, #backwardNav,
#forwardNav {
   float:left;
   width:30%;
   position:relative;
}


.weekForward {
max-width: 22%!important;
min-width: 20%!important;
max-height: 15%!important;
min-height: 15%!important;
padding: 0px 0px 0px 0px !important;
border: none;
height: 40px;
line-height: 48px;
display:inline-block;
}
.weekBackward {
    max-width: 22%!important;
    min-width: 20%!important;
    max-height: 15%!important;
    min-height: 15%!important;   
    padding: 0px 0px 0px 0px !important;
    border: none;
    height: 40px;
    line-height: 48px;
    display:inline-block;
}

.weekCurrent {
max-width: 22%!important;
min-width: 20%!important;
max-height: 10%!important;
min-height: 10%!important;
padding: 0px 0px 0px 0px !important;
border: none;
height: 35px;
line-height: 48px;
vertical-align: middle;
display:inline-block;
}

＆＃13;

<div id="navBtns">
<div id='forwardNav'>
<button type="button"  class="weekForward" id="plus" value="Forward">
    <span class="glyphicon glyphicon-forward"></span>
</button>
</div>
<div id="weekNav"> 
  <p id="week">Week</p>
  <button type="button" class="weekCurrent" id="curr" value="Current">
     <span class="glyphicon glyphicon-arrow-up"></span>
  </button>                                                                                                                                                                                                             
</div> 

<div id='backwardNav'>
<button type="button" id="minus" class="weekBackward" value="Backward">
    <span class="glyphicon glyphicon-backward"></span>
</button>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您在寻找这种解决方案吗？

＆＃13;

＆＃13;

.weekNav {
    font-size:20px;
    position:relative;
    padding-left: 50%;
    padding: 0px 0px 0px 16px !important;
    border: none;
    vertical-align: middle;
    height: 48px;
    line-height: 48px;
}
.weekForward,.weekBackward, .weekCurrent,p{
    max-width: 22%!important;
    min-width: 20%!important;
    max-height: 15%!important;
    min-height: 15%!important;
    padding: 0px 0px 0px 0px !important;
    border: none;
    height: 40px;
    line-height: 48px;
    display:inline-block;
}


p{
    text-align:center;
}

.weekCurrent {
    margin-left:20%!important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

<div>
<div>
    <button type="button" class="weekBackward" id="minus" value="Backward">
        <span class="glyphicon glyphicon-backward"></span>
    </button>
    <p id="week">Week one</p> 
    <button type="button" class="weekForward" id="plus" value="Forward">
        <span class="glyphicon glyphicon-forward"></span>
    </button>
</div>
<button type="button" class="weekCurrent" id="curr" value="Current">
       <span class="glyphicon glyphicon-arrow-up"></span>
</button>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用解决方案https://jsfiddle.net/26w7pL6s/1/

＆＃13;

＆＃13;

.weekNav {
    font-size:20px;
    position:relative;
    padding-left: 50%;
    padding: 0px 0px 0px 16px !important;
    border: none;
    vertical-align: middle;
    height: 48px;
    line-height: 48px;
}

.weekGroupBtn {
  max-width: 22%!important;
  min-width: 20%!important;
  max-height: 15%!important;
  min-height: 15%!important;
  padding: 10px 0;
  border: none;
  display:inline-block;
}


.weekForward {
  float:right;
}
.weekBackward {
  float:left;
}

.weekCurrent {
  vertical-align: middle;
  margin-left: 10px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="weekNav"> 
  <p id="week"></p>                                                               </div> 

<div id="navBtns">
  <button type="button" class="weekGroupBtn weekForward" id="plus" value="Forward">
    <span class="glyphicon glyphicon-forward"></span>
  </button>

  <button type="button" class="weekGroupBtn weekBackward" id="minus" value="Backward">
    <span class="glyphicon glyphicon-backward"></span>
  </button>

  <button type="button" class="weekGroupBtn weekCurrent" id="curr" value="Current">
    <span class="glyphicon glyphicon-arrow-up"></span>
  </button>
</div>

＆＃13;

＆＃13;

＆＃13;

如果许多类的CSS属性大部分都相同，那么尝试使用具有相同属性的通用类＆amp;将它分配给所有＆amp;然后为唯一属性添加一个单独的类。

希望这会对你有所帮助。