Question

我有以下代码（JSFiddle）：

HTML：

<div id="content">
  <div id="mainBox" class="textBox">
    <div id="mainMenuBar">
      <button class="jqueryUIButton">New Diagnosis</button>
      <button class="jqueryUIButton">My Diagnosises</button>
      <button class="jqueryUIButton">My Account</button>
    </div>
  </div>
</div>

CSS：

#mainMenuBar {
    background: linear-gradient(to bottom right, #30273a, #8d78a5);
    padding: 5px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    resize: none;
    border:1px solid #30273a;
    box-shadow: 0 0 10px #8d78a5;
    border-radius: 15px 15px 15px 15px;
}

#content {
    margin: 0 auto;
    margin-top: 100px; // former 250px
    padding: 0;
    width: 750px;
    max-width: 80%;
    padding-bottom: 40px;
    text-align: center;
}

JS：

$( ".jqueryUIButton" ).button();

现在三个按钮位于DIV-Box的水平中心。但是我希望它们在整个宽度上均匀分布。我怎么能这样做？

会喜欢任何建议。谢谢！

Answer 1

只需使用the flexbox model：

enableCollapsibleOptGroups

你也可以使用Function Applications() Dim i As Long Dim j As Long Dim k As Long Dim x As Long Dim y As Long Dim ws1 As Worksheet Dim ws2 As Worksheet Dim ws3 As Worksheet Dim ws4 As Worksheet Set ws1 = Worksheets("Traffic") Set ws2 = Worksheets("Processing Apps") Set ws3 = Worksheets("Approved Apps") Set ws4 = Worksheets("Denied Apps") Dim ColLast1 As Long, RowLast As Long, FullName As Long, SubDate As Long, Wants As Long, _ PosUnit As Long, MoveInDate As Long, AppDep As Long, LSent As Long, LRec As Long, ESent As Long, _ ERec As Long, SSent As Long, SRec As Long, SexOff As Long, Crim As Long, Correct As Long, _ PreApp As Long, Corp As Long, FU1Date As Long, FU1Note As Long, StatusCode As Long With ws1 ColLast1 = .Cells(1, Columns.Count).End(xlToLeft).Column RowLast = .Cells(Rows.Count, 1).End(xlUp).Row With .Range(.Cells(1, 1), .Cells(1, ColLast1)) StatusCode = .Find("Code").Column FullName = .Find("Full Name").Column SubDate = .Find("Submit").Column Wants = .Find("Wants").Column PosUnit = .Find("Punit").Column MoveInDate = .Find("MIDate").Column AppDep = .Find("App/Dep").Column LSent = .Find("LLSent").Column LRec = .Find("LLRecieved").Column ESent = .Find("EMSent").Column ERec = .Find("EMRecieved").Column SSent = .Find("ShanSent").Column SRec = .Find("ShanRecieved").Column SexOff = .Find("SO").Column Crim = .Find("Criminal").Column Correct = .Find("Corrections").Column PreApp = .Find("Prelim").Column Corp = .Find("SentToCorp").Column FU1Date = .Find("AppFU1Date").Column FU1Note = .Find("AppFU1").Column End With End With k = 1 ReDim data(1 To (RowLast), 1 To 19) As Variant For i = 10 To RowLast Select Case ws1.Cells(i, StatusCode).Value Case "W" AppWorking = Array(FullName, SubDate, Wants, PosUnit, MoveInDate, AppDep, LSent, LRec, _ ESent, ERec, SSent, SRec, SexOff, Crim, Correct, PreApp, Corp, FU1Date, FU1Note) j = 1 For Each A In AppWorking data(k, j) = ws1.Cells(i, A).Value j = j + 1 Next A k = k + 1 End Select Next i x = UBound(data, 1) - LBound(data, 1) + 1 y = UBound(data, 2) - LBound(data, 2) + 1 Range("ProcessingDataField").Resize(x, y) = data Sheet7.Activate End Function，并使用边距和填充来进行微调。

Modified fiddle

Answer 2

这是flexbox的典型应用程序：

https://jsfiddle.net/aj88xck2/

只需将display: flex;和justify-content: space-around;（或空格）添加到容器中。

Answer 3

FlexBox 来救援：

＆＃13;

#mainMenuBar {
  background: linear-gradient(to bottom right, #30273a, #8d78a5);
  padding: 5px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  resize: none;
  border:1px solid #30273a;
  box-shadow: 0 0 10px #8d78a5;
  border-radius: 15px 15px 15px 15px;
  display: flex;
  justify-content: space-around;
}

#content {
  margin: 0 auto;
  margin-top: 100px; // former 250px
  padding: 0;
  width: 750px;
  max-width: 80%;
  padding-bottom: 40px;
  text-align: center;
}

＆＃13;

<div id="content">
  <div id="mainBox" class="textBox">
    <div id="mainMenuBar">
      <button class="jqueryUIButton">New Diagnosis</button>
      <button class="jqueryUIButton">My Diagnosises</button>
      <button class="jqueryUIButton">My Account</button>
    </div>
  </div>
</div>

＆＃13;

Answer 4

<button class="jqueryUIButton" style="height:20px; width:145px">New Diagnosis</button>

100％工作

** The length of the bar is 440px, divided by 3 you get 145px; **

在div中均匀分配按钮

4 个答案: