0

好的，我的问题的 jsFiddle 在这里：http: //jsfiddle.net/Cn8ek/和这里： http: //jsfiddle.net/Cn8ek/1/ 第一个 jsFiddle 的全屏结果：http: //jsfiddle.net/Cn8ek /嵌入式/结果/

我一直试图在小提琴中设置蓝色背景的宽度，auto以便它以与 Red Ribbon CSS 相同的方式调整大小（到其中的内容），但是，无论我做什么都是总是相同的大小：可用宽度的 100%，减去该元素上方的第三个父元素的 padding-left 和 padding-right，类为content_slider_text_block_wrap

我为类为 的元素使用的 CSSsub_head_text是我需要根据元素内的文本调整宽度的元素，如下所示：

.content_slider_text_block_wrap .sub_head_text {
    text-align: center;
    text-transform: uppercase;
    font-size: .8em;
    margin: -0.5em;
    padding-bottom: .5em;
    position: relative;
}

.content_slider_text_block_wrap .sub_head {
    padding: 0 .3em;
    position: relative;
    margin: 0 auto;
    top: -40px;
    text-align: center;
    background-color: #212D3B;
    font-family: "MissionGothic-Regular", "Mission Gothic Regular Regular", "mission_gothicregular";
    font-size: 1.6em;
    color: #f2efe9;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    -khtml-border-radius: .5em;
    border-radius: .5em;
    text-transform: uppercase;
}

HTML DOM 中的所有元素的结构如下：

<div class="content_slider_text_block_wrap">
    <div class="name_container">
        <div class="sub_head">
            <h1 class="h1_candidates"><span class="sidestar-left">&#9733;</span>&nbsp;&nbsp;Dan&nbsp;Lawless&nbsp;&nbsp;<span class="sidestar-right">&#9733;</span></h1>
            <div class="sub_head_text">Chief Lending Officer&nbsp;&nbsp;&bull;&nbsp;&nbsp;Accion Texas, Inc.&nbsp;&nbsp;&bull;&nbsp;&nbsp;CITY, STATE</div>
        </div>
    </div>
    <div class="centertext">
        Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet 
        Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet 
        Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet 
        Lorem ipsum dolor sit amet Lorem ipsum dolor sit ametLorem ipsum dolor sit amet
        Lorem ipsum dolor sit amet
    </div>
    <br /><br /><br />
    <a href="#" class="button_regular">More Info</a><!-- button_regular -->
</div>

我遇到的主要问题是如何让蓝色背景区域的宽度根据其中的内容（文本）而改变。但只需要在一条线上，当然，就像现在一样居中。我正在使用ems字体大小，但这在调整浏览器窗口大小时似乎也没有任何区别。如何？？

最让我困惑的是，为什么红丝带的h1元素宽度会根据其中的内容（文本）而变化，但div包含在同一个父元素（作为h1元素）中的蓝色背景元素却不会？

最后，我的问题是：“如何根据其中的文本调整蓝色背景的大小，即与红丝带背景在同一个父级中，并保持蓝色和红丝带在页面内居中？”

4

0 回答 0