0

我想要的是：

我所取得的成就：

我已经将两个 DIV 标签放在一起浮动（我也尝试过使用表格）。我希望 HR 线填充标题未使用的其余水平空间。

我不想使用固定宽度或百分比宽度。

我已经尝试了大多数我所知道的表格单元格。我可以描述我想要的属性的最佳方式类似于 display: inline with headers，因此它会阻止它全宽，但表格会环绕它以离开 HR 表格单元格以填充行的其余部分。

这是一些代码：最初没有附加，因为只有表格对它没有太大影响，丢弃了不相关的部分

 .certificatetitle { font-weight: 100; font-size: 16px; }

 .collapsed .line {  height: 40px;  }
 .line { height: 40px;   }
 .line hr { color: #f69f1a; background-color: #f69f1a; border-color: #f69f1a; height: 1px; }


<table class="certificatebar" height="40px">
    <tr>
        <td class="certicon" width="30px"></td><td class="certificatetitle">Microsoft Office</td><td class="line"><hr /></td><td class="dropdown" width="20"></td>
    </tr>
</table>
4

2 回答 2

0

您可以使用单个元素完全做到这一点，使其保持语义纯度（更不用说将来易于维护）。

http://cssdeck.com/labs/kw3ivdam

<h1>Microsoft Office</h1>

h1 {
    /* add "door" logo image as background here */
    position: relative;
    overflow: hidden;
}

h1:before { /* element holding your carrot image */
    position: absolute;
    display: inline-block;
    content: ' ';
    right: 0;
    top: 50%;
    margin-top: -15px; /* half of your height */
    width: 30px; /* width of bg image */
    height: 30px; /* height of bg image */
    background: url(http://placehold.it/30x30) no-repeat white;
}

h1:after { /* element creating your `hr` effect */
    display: inline-block;
    content: " ";
    border-bottom: 1px solid goldenrod;
    width: 100%;
    margin-right: -50%;
    vertical-align: middle;
}
于 2013-04-30T20:36:40.980 回答
-1

可能这可以帮助你。

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
        table.certificatebar { width: 100%; }
        .certificatetitle { font-weight: 100; font-size: 16px; }
        .collapsed .line { height: 40px; }
        .line { height: 40px; width: 100%; }
        .line hr { 
            color: #f69f1a; 
            background-color: #f69f1a; 
            border-color: #f69f1a; 
            height: 1px;
        }
    </style>
</head>
<body>
<table class="certificatebar" height="40px">
    <tr>
        <td class="certicon" width="30px"></td>
        <td class="certificatetitle">Microsoft&nbsp;Office</td>
        <td class="line"><hr/></td>
        <td class="dropdown" width="20"></td>
    </tr>
</table>
</body>
</html>
于 2013-04-30T12:19:55.977 回答