Question

我有一个按钮框和一个图表，应该在一个div中对齐，但它们不是，我不知道如何使它们对齐

我的按钮位于包含以下CSS的框中：

.CrewPrsntButtonsError {                             
    font-size:11px;
    width:100px;              
    height:100px;             
    color:black;             
    background:linear-gradient(to bottom, red 15%,  white 10%);            
}

这是我的图表：

<div id="Chart" style="float:left;width:20%;"></div>

考虑这些：

<div  style="margin-top:20px;width:100%" >
      <div id="containerBtns" style="display:none;float:right;">
             <button type="button" id="btnErrorStat" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnIdle" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnService" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnLinkDn" class="CrewPrsntButtonsError"></button>
             <button type="button" id="btnDataIn" class="CrewPrsntButtonsError" ></button>
             <button type="button" id="btnrepOff" class=CrewPrsntButtonsError"></button>
             <button type="button" id="btnCrew" class="CrewPrsntButtonsError"></button>                    
      </div>
      <div id="Chart" style="float:left;width:20%;"></div>           
</div>

截图

Answer 1

存在一些语法错误，例如缺少"。请尝试以下示例。我希望它对你有用。

＆＃13;

.CrewPrsntButtonsError {                             
  font-size:11px;
  width:100px;              
  height:100px;             
  color:black;             
  background:linear-gradient(to bottom, red 15%,  white 10%);            
}
.container{
  width: 100%;
  overflow: hidden;
}
#containerBtns{
  width: 70%;
  float:left;
  background: red;
}
#Chart{
  width: 20%;
  float:right;
  background: blue;
}

＆＃13;

<div class='container' >
  <div id="containerBtns">
    <button type="button" id="btnErrorStat" class="CrewPrsntButtonsError">button</button>
    <button type="button" id="btnIdle" class="CrewPrsntButtonsError">button</button>
    <button type="button" id="btnService" class="CrewPrsntButtonsError">button</button>
    <button type="button" id="btnLinkDn" class="CrewPrsntButtonsError">button</button>
    <button type="button" id="btnDataIn" class="CrewPrsntButtonsError" >button</button>
    <button type="button" id="btnrepOff" class="CrewPrsntButtonsError">button</button>
    <button type="button" id="btnCrew" class="CrewPrsntButtonsError">button</button>         </div>
  <div id="Chart">chart here</div>          
</div>

＆＃13;

Answer 2

<html>
    <head>
        <style>
            body{
                margin:0;
            }
            .container{
                margin-top:20px;
                width:100%
            }
            .sub-container{
                text-align: center;
                box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16), 0 0 0 1px rgba(0,0,0,0.08);
                padding:10px;
            }
            .chartContainer{
                float:left;
                width:60%;
            }
            .buttonContainer{
                float: right;
                width:30%;
            }
            button{
                background: #DBE6F6;  /* fallback for old browsers */
                background: -webkit-linear-gradient(to right, #C5796D, #DBE6F6);  /* Chrome 10-25, Safari 5.1-6 */
                background: linear-gradient(to right, #C5796D, #DBE6F6); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
            }
        </style>
    </head>
    <body>
            <div class="container">
                    <div id="chartContainer" class="chartContainer sub-container">
                        Chart
                    </div>
                    <div id="buttonContainer" class="buttonContainer sub-container">
                            <button type="button" id="btnErrorStat" class="CrewPrsntButtonsError">button</button>
                            <button type="button" id="btnIdle" class="CrewPrsntButtonsError">button</button>
                            <button type="button" id="btnService" class="CrewPrsntButtonsError">button</button>
                            <button type="button" id="btnLinkDn" class="CrewPrsntButtonsError">button</button>
                            <button type="button" id="btnDataIn" class="CrewPrsntButtonsError" >button</button>
                            <button type="button" id="btnrepOff" class="CrewPrsntButtonsError">button</button>
                            <button type="button" id="btnCrew" class="CrewPrsntButtonsError">button</button>
                    </div>
            </div>
    </body>
</html>

关于在一个div中对齐两个div的混淆

2 个答案: