Question

这种流畅的设计适用于我的笔记本电脑上的所有浏览器，但在我的Android和iPhone上，链接按钮分为两行。如果我改变样式的宽度百分比（一个跨度），我可以让它工作，但是它的宽度不再像它下面的容器一样宽，而且需要它。

我假设样式（跨度）只能填充样式（em）和样式（a b）之间的区域，我想我错了。

提前感谢任何可以帮助我的人。

样式

.main_container {

    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: url(../images/bgdots.png);
    background-repeat: repeat-x y;
    background-attachment: fixed;
    background-color: transparent;
    padding-bottom: 20px;
}

h2.acc_trigger {
    display: block;
    margin: 0 0 2px 0;
    width: 95%;
    height: 30px; 
    font-size: 1.5em;
    font-weight: normal;
    text-align: center;
    margin-left: auto;   
    margin-right: auto;   
}

a em{
    display: block;
    float: left;
    background: url(../images/navs.png) no-repeat 0 0;
    width: 26px;
    height: 30px;
} 


a span{
    display: block;
    float: left;
    background: url(../images/navs_c.png) repeat-x;
    width: 95%;
    height: 30px;
}

a b{
    display: block;
    float: left;
    background: url(../images/navs.png) no-repeat -28px 0;
    width: 5px;
    height: 30px;
} 

.acc_container {
    margin: 0 0 2px; 
    overflow: hidden;
    font-size: 1.2em;
    width: 95%;
    clear: both;
    background: #fff;
    border: 2px solid #3cf;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px; 
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px; 
    margin-left: auto;   
    margin-right: auto;   
}

示例HTML

      <h2 class="acc_trigger">
        <a href="#"><em>&nbsp;</em> <span>
        home</span> <b>&nbsp;</b></a>
      </h2>

      <div class="acc_container">
        <h3>
          Content content content!
        </h3>
        <p>
          Content and more content, content with style and interest
          that makes you want to read on. 
        </p>
      </div>

Answer 1

添加样式float:left可能会解决您的问题

Answer 2

您希望自己拥有百分比。我假设您希望代码像我的example here

一样工作

a em{
    display: block;
    float: left;
    background: url(../images/navs.png) no-repeat 0 0;
    width: 2%;
    height: 30px;
} 

a b{
    display: block;
    float: left;
    background: url(../images/navs.png) no-repeat -28px 0;
    width: 2%;
    height: 30px;
}

基本上95％加26px加26px可以等于＆gt;屏幕。所以它包装好了。你希望所有这三个元素都有一个百分比来保持它的生命。

Answer 3

如果您使用CSS

，则不需要内联样式

 <h2 class="acc_trigger">
 <a href="#"><em>&nbsp;</em> <span> home</span> <b>&nbsp;</b></a>
  </h2>

应该是

<h2 class="acc_trigger"><a href="#">home</a></h2>

a.acc_trigger{
 font-style:italic;
 font-weight: bold;
}

H2是一个块级元素。如果你想让它内联就行：

<h2 class="acc_trigger"><a href="#">home</a></h2>

a.acc_trigger{
 font-style:italic;
 font-weight: bold;
 display: inline;
}

如何保持样式“跨度”从跳到下一行？

3 个答案: