Question

我已经创建了一个按钮，这就是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，如下所示，使用青色底纹框？我从来没有试过这个。

align top http://www.kerrydeaf.com/shade2.png

更新：我有这个＆lt; div＆gt;＆lt; / div＆gt;在另一个容器的底部但是有间隙可见，并试图缩小差距而没有成功？我正在使用当前＆lt; div＆gt;＆lt; / div＆gt;如下。

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

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

align top http://www.kerrydeaf.com/shade4.png

我希望使用这个＆lt; div class =“blue_text”＆gt;请改为观看此视频。＆lt; / div＆gt; 以下边距缩小边距'0'。

align top 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 位置：相对应该进入？

align top http://www.kerrydeaf.com/div.png

Answer 1

请在此处查看我的工作示例：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;

 }

垂直对齐文本图标与阴影框和角落仅在顶部

1 个答案: