Question

我非常喜欢ZURB构建基块库中的Option Button：http://zurb.com/building-blocks/option-button 但是，我几乎总是使用1 x普通超链接按钮和提交按钮。我发现这让我头疼，无论我在哪里尝试整齐的按钮行看起来都一样。在使用输入提交类时，还有什么额外的CSS可以使“选项按钮”按需运行？

我的HTML非常简单，看起来像这样：

<form name="article_selection" action="single-article-view.php" method="post">
          <div class="row">
            <div class="medium-6 columns">
                <div class="wrapper">
                     <label>READ MORE</label>

                    <a href="<?php echo $article_URL; ?>" class="inside">Read on another website</a>


                    <input type="hidden" value="<?php echo $article_ID; ?>" name="article_ID" />
                    <input type="submit" class="inside" name="<?php echo $article_ID; ?>" value="Read on this website" />

                 </div>
            </div>
        </div>
</form>

在这种情况下，选项按钮的下半部分格式不正确。由于声誉限制，我无法更新要显示的图像（严重吗？）

<a href="http://s96.photobucket.com/user/indoanalytics/media/Button_Problem_zpszhgpvzbt.png.html" target="_blank"><img src="http://i96.photobucket.com/albums/l185/indoanalytics/Button_Problem_zpszhgpvzbt.png" border="0" alt=" photo Button_Problem_zpszhgpvzbt.png"/></a>

根据构建基块选项按钮（链接到上面）的CSS是：

.wrapper {
  overflow: hidden;
  display: inline-block;
  border: 2px solid #008cba;
  border-radius: 999px;
  text-align: center;
  width: 100%;
  background: #fff;
  margin-top: 50px;

}

.wrapper:hover {
  border: none;
  background-color: #008cba;
  transition: background-color 0.3s ease;

}

.wrapper:hover .inside {
  display: block;
  font-size: 16px;
  padding: 22px;
  float: left;

}

.wrapper:hover .inside:hover {
  transition: background-color 0.3s ease;
  background-color: rgba(0, 0, 0, 0.1);

}

.wrapper:hover label {
  display: none;

}

.wrapper .inside {
  display: none;
  color: #fff;
  width: 50%;
  z-index: 9999;

}

.wrapper label {

  padding: 16px;
  color: #008cba;
  font-size: 16px;
  font-weight: bold;

}

更新：在我的CSS中，我之前也有单独的按钮样式，这可能会导致问题。

.topic-button { 

        border-style: solid;
        border-width: 1px;
        font-family: inherit;
        font-weight: bold;
        line-height: 1;
        position: relative;
        text-decoration: none;
        text-align: center;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background: #009fd9;
        color: #fff;
        box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset;
        border-color: #008cbf;
        font-size: 12px;
        padding: 5px 6px;
        margin-top: 2px;
        cursor: pointer;
}

.menu-topic-button { 
        width:99%;
        background: #444444;
        border:none;
        font-family: inherit;
        font-weight: bold;
        line-height: 1;
        position: relative;
        text-decoration: none;
        text-align: center;
        color: white;
        font-size: 14px;
        padding: 2px;
        margin-top: 2px;
        cursor: pointer;
      }

我尝试将上述CSS应用于：

.wrapper button[type="submit"] {}
.wrapper input[type="submit"] {}

对于我来说，我已经从zurb构建块复制了.inline CSS，并尝试将CSS值重置为零，但没有运气。非常感谢任何帮助。

如何在Foundation Zurb CSS中使用超链接和提交按钮

0 个答案: