Question

我一直试图让这项工作正常，我不确定这个解决方案是否正确..

我知道我可以在我的解决方案中添加多个div，但我希望代码尽可能短......

它基本上是一个带有按钮和一些信息的盒子..这是最简单的方法吗？

.actionbox {
    width:90%;
padding-top:20px;
padding:20px; 
    background-color: #999999;
    border-left:10px solid #2ecc71;
    display:inline-block;   

    }

.ashbox{background-color:#34495e;color:white;}


.button{
display: inline-block;
  font-weight: normal;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
    font-family:'PT Sans',helvetica;

}
h1 { margin:0}
.button,.button.green{background:#69c773;color:#FFF;-webkit-box-shadow:0 4px 0 0 #51a65f;-moz-box-shadow:0 4px 0 0 #51a65f;box-shadow:0 4px 0 0 #51a65f;}

.floatright {float:right;}
.floatleft {float:left;}

HTML

<div style="width:800px; margin:0 auto;">
<div class="actionbox ashbox">

<h1 class="floatleft">Open Box</h1>
<a href="test.html" class="button floatright">Learn More Info</a>

</div>
</div>

Working Demo JSFIDDLE

Answer 1

你的演示你有两个div

你可以省略一个div并实现相同的...享受演示：）

http://jsfiddle.net/6LHrD/3/

我添加了这个css

margin:0 auto;
display:table;

到.actionbox班级

添加图片后 http://jsfiddle.net/6LHrD/7/

带按钮的css信息框

1 个答案: