0

我已经创建了一个按钮，这就是 HTML 的显示方式，如下所示：

<div class="blue_text"><button class="blue_small" id="blue_small"></button> View this video instead.</div>

CSS如下。在不更改现有标记的情况下垂直对齐的文本：

#blue_text{ color:#48c4d2; font-size:15px; font-family:opensansitalic;}

使用它来垂直对齐按钮而不更改现有标记。

​button {
vertical-align:middle;
}

按钮 CSS 总数：

.blue_small {
 height: 40px;
width: 40px;
margin-left:16px;
margin-bottom:1px;
background-color:#fff;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
border: 3px solid #fff;
background:url(../images/index_video_small2.svg) no-repeat 5px 7px;
-webkit-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);  
-moz-box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
box-shadow: 0px 2px 6px rgba(64,80,85,0.8);
color:#48c4d2; font-size:15px;
    font-family:opensansitalic;}

我想将以上所有内容与青色阴影框组合成 CSS 如下？我从来没有试过这个。

对齐顶部 http://www.kerrydeaf.com/shade2.png

更新：我在另一个容器的底部有这个 < div ></ div > 但有可见的间隙并试图缩小间隙但没有成功？我正在使用当前的 < div ></ div >，如下所示。

<div class="blue_text"><button class="blue_small" id="blue_small"></button> View this video instead.</div>

这是一个可见的差距，如下所示：

对齐顶部 http://www.kerrydeaf.com/shade4.png

我希望改用这个< div class="blue_text" > 查看这个视频。</div >用边距“0”来缩小差距，如下所示。

对齐顶部 http://www.kerrydeaf.com/shade3.png

更新星期五下午 2 点：谢谢你，这是一种享受。它转到浏览器窗口的底部。我希望蓝色框在 DIV 标签之间关闭，例如下面的这个 DIV 标签。这个div class="toogle_wrap"是一个 DIV 容器，我在其中突出显示了一个要关闭的间隙，如下所示。将至少有五个div class="toogle_wrap"，这是下面的一个div class="toogle_wrap"，因此每个差距都需要缩小。

      <div class="toogle_wrap">
    <div class="trigger"><a href="#"><span class="trig">1.</span> Deaf person's attention</a></div>
    <div class="toggle_container"> 
    <ul class="lists">
    <li>Learn <span class="bold">how to get</span> a Deaf person's attention.</li>
    <li>Take a step-by-step process.</li>
    <li>Approaching a Deaf and your approach may suggest your intention to communicate.</li>
    <li>You can also <span class="bold">wave</span> to get eye contact or <span class="bold">tap</span> the person gently on the shoulder.</li>
    <!--<li><span class="bold">Watch a video instead:</span> <span class="typicons">Z</span>  <span class="typicn"<h5>Z</h5></span> </li>-->
    </ul>
    <div class="blue_text"><button class="blue_small" id="blue_small"></button> Available in video.</div>
            <<<<<<<<<< The gap is here to close here >>>>>>>>.
            <<<<<<<<<< The gap is here to close here >>>>>>>>.
            <<<<<<<<<< The gap is here to close here >>>>>>>>.
            <<<<<<<<<< The gap is here to close here >>>>>>>>.
            <<<<<<<<<< The gap is here to close here >>>>>>>>.
    </div>
  </div>

周五晚上 10 点更新。这是 DIV 的示例。哪个DIV是位置：相对应该进入？

对齐顶部 http://www.kerrydeaf.com/div.png

4

1 回答 1

0

在这里查看我的工作示例：http: //jsfiddle.net/2x6ub/3/

div.toggle_container { 
   position: relative;  // this makes the blue_text div being able to align to bottom
   border: 1px solid #000; height: 300px; // this is just to test, remove or adjust
}

.blue_text{ 
    background:#48c4d2; 
    color:#fff; 
    font-size:20px; 
    font-family:opensansitalic; 
    width:400px; 
    font-style:italic; 
    padding:20px; 
    border-top-left-radius:20px;
    border-top-right-radius:20px;
    -moz-border-top-left-radius:20px;
    -moz-border-top-right-radius:20px;
    -webkit-border-top-left-radius:20px;
    -webkit-border-top-right-radius:20px;

    /* to align to bottom of parent container */
    position: absolute; 
    bottom: 0px;

 }
于 2012-10-25T21:32:30.417 回答