Question

将CSS与CSS结合使用。

在一个div上，我有三个按钮，每个按钮用CSS编写不同的类（边框样式）。我使按钮表现在宽度固定的位置，而高度根据文本长度改变大小。

我遇到的问题是，当一个按钮改变大小（高度）时，其他按钮不会跟随或不继承相同的高度，div也会被调整。

以下是我的HTML代码：

  <div class="container-1020-Apx">

        <button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button>
        <button type="button" class="btn-styleCT"> middle </button>
        <button type="button" class="btn-styleRT"> right </button>
  </div>

这是我在CSS中的代码：

 .container-1020-Apx {
    margin:auto;
    text-align: left;
    width:1020px;
    min-height: 30px;
    background-color: White;
    display:block;
 }

 .btn-styleLT{
    border : solid 2px #170417;
    border-radius : 20px 0px 0px 0px ;
    moz-border-radius : 0px 20px 0px 0px ;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width: 422px;
    background : #000000;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : linear-gradient(top, #000000 0%, #1f3b08 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleRT{
    border : solid 2px #170417;
    border-radius : 0px 20px 0px 0px ;
    ... <almost same content>
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleCT{
    border : solid 2px #170417;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width:167px;
    background : #000000;
    ... <almost same content> 
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleLT:hover,
 .btn-styleLT:focus,
 .btn-styleLT:active,
 .btn-styleLT.active {
    color: #ffffff;
    background-color: #3276b1;
    border-color: #285e8e;
 }

 .btn-styleRT:hover,
  ... <same>
    border-color: #285e8e;
 }

 .btn-styleCT:hover,
 ... <same>
    border-color: #285e8e;
 }

有什么想法吗？我正在考虑为每个按钮提供单独的div，但如果没有这样做，那就太棒了。

Answer 1

你需要使用display：table和display：table-cell来实现你想要的。

这里是一个jsfiddle：http://jsfiddle.net/vtajZ/293/

HTML：

<div class="parent">
    <div class="child"><button type="button" class="btn-styleLT">The quick brown fox jumped over the lazy rabbit because it is not paying attention to it's mother who cried wolf. </button></div>
    <div class="child"><button type="button" class="btn-styleCT"> middle </button></div>
    <div class="child"><button type="button" class="btn-styleRT"> right </button></div>
</div>

的CSS：

*{
    box-sizing:content-box;
}
.parent {
    display: table;
    position:relative;
}
.child {
    display: table-cell;
}

.btn-styleLT{
    border : solid 2px #170417;
    border-radius : 20px 0px 0px 0px ;
    moz-border-radius : 0px 20px 0px 0px ;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width: 422px;
    background : #000000;
    background : -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#353535));
    background : -moz-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -webkit-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -o-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : -ms-linear-gradient(top, #000000 0%, #1f3b08 100%);
    background : linear-gradient(top, #000000 0%, #1f3b08 100%);
    filter : progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#1a0d1a',GradientType=0 );
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleRT{
    border : solid 2px #170417;
    border-radius : 0px 20px 0px 0px ;
    ... <almost same content>
    min-height: 20px;
    max-height: inherit;
 }

 .btn-styleCT{
    border : solid 2px #170417;
    font-size : 16px;
    color : #f4f6f7;
    padding : 4px 18px;
    width:167px;
    background : #000000;
    ... <almost same content> 
    min-height: 20px;
    max-height: inherit;
 }
.btn-styleCT,.btn-styleRT{
    height: 100%;
}
.btn-styleCT{
    position:relative;
    height:100%;
}
.parent button{
    margin:0px;
}

如何在同一个div上制作其他按钮继承更大按钮的高度尺寸？

1 个答案: