Html 我希望两个div或Table单元格在每个单元格旁边浮动，一个有display:inline，另一个填充行的其余部分_Html_Css

Html 我希望两个div或Table单元格在每个单元格旁边浮动，一个有display:inline，另一个填充行的其余部分

html css

Html 我希望两个div或Table单元格在每个单元格旁边浮动，一个有display:inline，另一个填充行的其余部分,html,css,Html,Css,我想要的是：我所取得的成就：我已经将两个DIV标记浮动在一起（我也尝试过使用表）。我希望HR行填充标题未使用的其余水平空间我不想使用固定宽度或%宽度我已经尝试了我所知道的大多数方法来处理单元格。我能描述我想要的属性的最好方法类似于display：与标题内联，因此它会阻止它全速运行，但表会将其环绕，使HR表单元格填充行的其余部分这里有一些代码：最初并没有附加，因为只有表与之无关，丢弃了不相关的部分 .certificatetitle { font-weight: 100; font

我想要的是：

我所取得的成就：

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

我不想使用固定宽度或%宽度

我已经尝试了我所知道的大多数方法来处理单元格。我能描述我想要的属性的最好方法类似于display：与标题内联，因此它会阻止它全速运行，但表会将其环绕，使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>

.certificateTile{font-weight:100；font-size:16px；}
.折叠。行{高度：40px；}
.line{高度：40px；}
.line hr{颜色：#f69f1a；背景色：#f69f1a；边框颜色：#f69f1a；高度：1px；}
微软办公软件

这可能对您有所帮助

<!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>


试验
table.certificatebar{宽度：100%；}
.CertificateTile{font-weight:100；font-size:16px；}
.折叠。行{高度：40px；}
.行{高度：40px；宽度：100%；}
.行hr{
颜色：#f69f1a；
背景色：#f69f1a；
边框颜色：#f69f1a；
高度：1px；
}
微软办公室

您可以完全使用单个元素来实现这一点，从而保持语义的纯洁性（更不用说将来的维护了）

Microsoft Office
h1{
/*在此处添加“门”徽标图像作为背景*/
位置：相对位置；
溢出：隐藏；
}
h1:在{/*元素持有你的胡萝卜图像之前*/
位置：绝对位置；
显示：内联块；
内容：''；
右：0；
最高：50%；
顶部边距：-15px；/*身高的一半*/
宽度：30px；/*bg图像的宽度*/
高度：30px；/*bg图像的高度*/
背景：url(http://placehold.it/30x30)没有重复的白色；
}
h1:在{/*元素创建'hr'效果之后*/
显示：内联块；
内容：“；
边框底部：1px实心黄花；
宽度：100%；
保证金权利：-50%；
垂直对齐：中间对齐；
}

显示一些代码请发布您尝试过的html，您将得到帮助，不需要添加时间编码，只需简单的表格即可。我只是想知道如何将.certificateTile设置为“显示内联”，这样.line就会自动填充表行的其余部分。相反，目前它们似乎占据了更大的部分，或者50%/50%的表格应该只用于显示表格数据，而不是布局。仅仅因为OP最初提供了一张桌子并不意味着它是最好的选择。

<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;
}