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

これを完全に 1 つの要素で行うことができるため、セマンティックの純粋性を維持できます (将来のメンテナンスが容易になることは言うまでもありません)。

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 に答える