Question

我似乎无法做到这一点。我正在构建一个移动应用程序（ionic / AngularJS），我想要一个底栏（页脚），分成两个盒子，中间有一个间隙。它的每一面都会将文本直接置于其中间。

它适合全宽（100％）。

我是用小提琴创作的：

我的HTML：

<div class="faketab">
    <table>
        <tr>
            <td>LEFT BOX</td>
            <td class="centerpiece"></td>
            <td>RIGHT BOX</td>
        </tr>
    </table>
</div>

CSS：

.faketab
{
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    color: #4d4d4d;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    /* height: 49px; */
    border-style: solid;
    border-top-width: 1px;
    background-size: 0;
}
.faketab table tr td {
    width: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
}
.centerpiece{
    border-left: 0.1em solid black;
}

Answer 1

我更喜欢使用div。您只需要将display属性设置为inline，将float设置为left。对于文本text-align：center。

＆＃13;

body{
  margin:0;
}
.faketab{
  display:inline-block;
  position: absolute;
  bottom: 0;
  width:100%;
  border-top:1px solid;
}

.tabs{
  float:left;
  width:49.5%;
  text-align:center;
}

.tabs:hover{
  color: #B0B0B0;
}

.vertical{
  float:left;
  border-left:1px solid;
  height:15px;
}

＆＃13;

<div class="faketab">
  <div class="tabs">LEFT BOX</div>
  <span class="vertical"></span>
  <div class="tabs">RIGHT BOX</div>
</div>

＆＃13;

祝你好运！

Answer 2

这是一个清理简单的结构，可以满足您的所有要求。

修改：This fiddle带有flex个属性前缀。

编辑2：This fiddle包含display: table而不是flex，并且可以使用IE8。

＆＃13;

.faketab {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 2px 2px;           /* space around buttons */
}
.faketab > div:first-child {
  margin-right: 2em;            /* space between boxes */
}
.faketab > div {
  width: 50%;
  height: 60px;
  font-size:18px;
  border: 2px solid #b2b2b2;
  background-color: #f8f8f8;
  color: #4d4d4d;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

<div class="faketab">
  <div>BUTTON</div>
  <div>BUTTON 2</div>
</div>

＆＃13;

Answer 3

您需要为每个display: table-cell添加td，然后更改以下代码：

<强> HTML

<div class="faketab">
    <table>
        <tr>
            <td>LEFT BOX</td>
            <td>RIGHT BOX</td>
        </tr>
    </table>
</div>

<强> CSS

.faketab table tr td {
    display: table-cell;
    width: 1%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
}

.faketab table tr td:last-child {
  border-left: 1px solid black;
}

<强> DEMO

您可以使用可在移动设备上运行的更少标记和更清晰的代码来执行相同的结果。

<强> 1。 <a>个链接

<强> HTML

<div class="tabs tabs--block">
  <a href="#" class="tabs__item">Left tab title</a>
  <a href="#" class="tabs__item">right tab title</a>
</div>

<强> CSS

.tabs {
  width: 320px;
  margin: 100px auto;
  border: 1px solid #000;
}

.tabs--block .tabs__item {
  display: block;
  width: 50%;
  float: left;
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}

.tabs--block .tabs__item:last-child {
  border-left: 1px solid #000;
}

.tabs--block:after {
  content: "";
  clear: both;
  display: table;
}

.tabs--block .tabs__item {
  display: block;
  width: 50%;
  float: left;
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}

.tabs--block .tabs__item:last-child {
  border-left: 1px solid #000;
}

<强> 2。 Flexbox的

<强> HTML

<div class="tabs tabs--flex">
<a href="#" class="tabs__item">Left tab title</a>
  <a href="#" class="tabs__item">right tab title</a>
</div>

<强> CSS

.tabs--flex {
  display: flex;
}

.tabs--flex .tabs__item {
  flex: 0 0 50%;
  padding: 1em;
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
}

.tabs--flex .tabs__item:last-child {
  border-left: 1px solid #000;
}

<强> DEMO

Answer 4

用于此 CSS border-spacing 属性

table{border-spacing: 0;}

table{border-spacing: 0;}

.faketab
{
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    color: #4d4d4d;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    /* height: 49px; */
    border-style: solid;
    border-top-width: 1px;
    background-size: 0;
}
.faketab table tr td {
    width: 2em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
}
.centerpiece{
    border-left: 0.1em solid black;
}

<div class="faketab">
    <table>
        <tr>
            <td>LEFT BOX</td>
            <td class="centerpiece"></td>
            <td>RIGHT BOX</td>
        </tr>
    </table>
</div>

Answer 5

只需添加以下属性，即可根据您的设计更改div的宽度和高度：

.faketab td{
      float:left;
      width:45%;
      border:1px solid #000;
      height:100px;
    }
    .centerpiece{
      width:3% !important;
      float:left !important;
    }

Answer 6

请使用＆＃39; flex-direction＆＃39;和名为＆＃39; faketab table tr td＆＃39;

的课程的填充

<强> HTML

<div class="faketab">
        <table>
            <tr>
                <td>LEFT BOX</td>
                <td class="centerpiece"></td>
                <td>RIGHT BOX</td>
            </tr>
        </table>
    </div>

<强> CSS

.faketab
{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: horizontal;
    -moz-flex-direction: horizontal;
    -ms-flex-direction: horizontal;
    flex-direction: horizontal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    border-color: #b2b2b2;
    background-color: #f8f8f8;
    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 50%, transparent 50%);
    color: #4d4d4d;
    position: absolute;
    bottom: 0;
    z-index: 5;
    width: 100%;
    /* height: 49px; */
    border-style: solid;
    border-top-width: 1px;
    background-size: 0; 
} 
.faketab table tr td {
    width: 1em;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align:center;
    vertical-align: middle;
    font-size:18px;
    flex-direction:row; 
    padding:0 50px 0 10px; /* this */ 
}
.centerpiece{
    border-left: 0.1em solid black;
}

两列以分隔符为中心内容

6 个答案: