html - 带按钮的CSS信息框

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/