Question

好的，所以我在这里问我的问题：http://jsfiddle.net/Cn8ek/和这里：http://jsfiddle.net/Cn8ek/1/第一个jsFiddle的全屏结果：http://jsfiddle.net/Cn8ek/embedded/result/

我一直试图在小提琴中设置蓝色背景的宽度，设置为auto，以便它以与红丝带CSS相同的方式（对于其内部的内容）调整大小，但是，无论我做什么，它总是相同的大小：100％的可用宽度，减去第3个父级的填充左侧和填充右侧，该元素的类别为content_slider_text_block_wrap

我用于sub_head_text类的元素的CSS，这是我需要根据元素内的文本调整宽度的元素如下：

.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作为font-size，但在调整浏览器窗口大小时似乎没有任何区别。如何??

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

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

如何将元素的宽度调整为1行内的实际内容？

0 个答案: