Question

（'男孩......我在搜索中看到关于<input>标签上包含<a>的错误主题... LOL）

总之...

我在这里有点蠢...我有一堆div作为一个单独的<button>引导的内联块，而这个单独的按钮---无论设计天才有多少我从我自己召唤，我无法正确对齐。

请查看帖子末尾的代码。
笔记： 按钮持有者类以前不存在;它只是<button><span>组合。我补充说它认为我可以通过在保证金上做负值来解决它（无济于事）。

有人可以提供建议吗？

完整代码：

<style type="text/css">
body { margin:0; padding:0;font-size: 9pt; }
#main { margin: 0; padding: 0; width:100%; text-align:center; }

#bar {display: table; margin: 0; padding: 0; width:100%; height:45px }
[class~=banner] {   font-size: 14pt; 
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
display: table-cell;
height: 45px;
vertical-align: middle;}
.cellOne {  background-color:#FFC316;
color: #35549A;
width: 8%; 
text-align:center;}
.cellTwo {  background-color: #35549A;
color: #FFF;
padding: 0px 0px 0px 2%;
width: 68%;
text-align: left;}
.cellThree {    background-color: #35549A;
color: #FFC316;
width: 12%;
text-align: left;}

#three_element {margin: 0 auto; padding:0% 18.5% 0% 18.5%; text-align:center; }

.button-holder {
width: 250px;
height: calc(250px / 1.604);
margin: -1.45% 1.5% -1.65% 1.5%;
display:inline-block;
padding:5px;
box-sizing:border-box;
}

#addbutton {
border-radius: 25px 25px 25px 25px;
-moz-border-radius: 25px 25px 25px 25px;
-webkit-border-radius: 25px 25px 25px 25px;
display:table;
border: 0px;
box-sizing:border-box;
padding:0px;
margin:0px;
background-color:#E6E7E8;
text-align:center;}

#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: calc(240px / 1.604);
vertical-align: middle;
margin: 0px;            
padding: 0px;
box-sizing: border-box;
}

[class~=objective-edit-tile] {
width: 250px;
height: calc(250px / 1.604);
margin: 1.5%;
display:inline-block;
box-sizing:border-box;
padding:5px;}

[class~=objective-edit-tile] div {
font-family:"Yanone Kaffeesatz","Arial Narrow",Arial,sans-serif;
box-sizing:border-box;
color:#FFFFFF;
margin:0px;
display:inline-block;
}

.tr-1-square-red div {background-color: #BE1E2D;}
.tr-1-square-yellow div {background-color: #E39F15;}
.tr-1-square-green div {background-color:#266733;}

.text-block-name {
border-radius: 25px 25px 0px 0px;
-moz-border-radius: 25px 25px 0px 0px;
-webkit-border-radius: 25px 25px 0px 0px;
border:#FFFFFF 1px solid;
width: 100%;
height: 66.7%;
font-size: 180%;
padding-top:17%;
}

.text-block-days {
border-radius: 0px 0px 0px 25px;
-moz-border-radius: 0px 0px 0px 25px;
-webkit-border-radius: 0px 0px 0px 25px;
border-top: #FFF 1px solid;
font-weight:700;
width: 34%;
height: 33%;
padding-top:6.5%;}

.text-block-next-step {
border-radius: 0px 0px 25px 0px;
-moz-border-radius: 0px 0px 25px 0px;
-webkit-border-radius: 0px 0px 25px 0px;
border-top: #FFF 1px solid;
font-size:9px;
width: 64%;
height: 33%;
padding:8% 2px 0px 1px;}
</style>

</head>

<body>
<div id="main">
<div id="bar">
<div class="banner cellOne">Pipeline</div>
<div class="banner cellTwo"> &lt;Title&gt; </div>
<div class="banner cellThree">PracticePipeline.com</div>
</div>

<div role="content" id="three_element">

<div class="button-holder">
<button id="addbutton" name="buttton">
<span class = "add">+</span>
</button>
</div>

<div class = "tr-1-square-red objective-edit-tile" id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>

</div>

<div class = "tr-1-square-yellow objective-edit-tile " id="tile-n">
<div class = "text-block-name" >GGN </div>
<div class = "text-block-days" > -10 Days</div>
<div class = "text-block-next-step" >Research GGN background </div>

</div>

<div class = "tr-1-square-green  objective-edit-tile " id="tile-n">
<div class = "text-block-name" >Stark Indust..  </div>
<div class = "text-block-days" > 7 Days</div>
<div class = "text-block-next-step" >Invite Stark Industri..  </div>
</div>

</div>
</div>
</body>

Answer 1

我不知道这是否会有所帮助但是当我尝试它时它会起作用。如果你希望它更好地对齐，标签填充底部会保持稍微高一些。

#addbutton .add {
display: table-cell;
font-size: calc(250px / 1.604 - 50px);
color: #384D94;
width: 240px;
height: 140px;
vertical-align: middle;
margin: 0px;            
padding: 0px;
box-sizing: border-box;
padding-bottom: 7%
}

Answer 2

我实际上解决了我自己的问题：

问题只是因为我在分析事情。基本布局工作：

.button-holder {
        margin:1.5%;
        display:inline-block;
        padding:5px;
        box-sizing:border-box;
        }

    #addbutton {
        border-radius: 25px 25px 25px 25px;
        -moz-border-radius: 25px 25px 25px 25px;
        -webkit-border-radius: 25px 25px 25px 25px;
        width: 240px;
        height: calc(250px / 1.604 - 10px);
        border: 0px;
        margin:0px;
        padding: 0px;
        background-color:#E6E7E8;
        box-sizing:border-box;
        text-align:center;

        }

        #addbutton .add {
            font-size: 97px;
            color: #384D94;
            }

HTML按钮标记未对齐

2 个答案: