如何在有文字的矩形内制作一个小正方形？

Question

我有一张截图，下面是我在 HTML & CSS 中复制的截图。

我为上面的屏幕截图创建了 fiddle。我使用 Bootstrap 4 来制作 table。

我用来制作行的 HTML 和 CSS 代码片段是：

HTML:

<div class="body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</th>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td class="left">Eve Doe</td>
                <td class="number1">250</td>
                <td class="table1">4</td>
                <td class="right-itemsreceived">Items Received</td>
            </tr>
            <tr>
                <td class="left">Fred Doe</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemsreceived">Items Received</td>
            </tr>
            <tr>
                <td class="left">Fred Doe's Guest 1</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemswaiting"> Items Waiting</td>
            </tr>
            <tr>
                <td class="left">Jack Doe</td>
                <td class="number1">14</td>
                <td class="table1">4</td>
                <td class="right-unpaid">Unpaid</td>
            </tr>
        </tbody>
    </table>
</div>

CSS:

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
}

.table thead th {
    border-bottom: none! important;
}

.table td.left {
    padding-right: 32%;
}

.body-manage-attendees tbody tr:hover {
    background-color: #EDEDED;
}

.body-manage-attendees .number {
    padding-left: 2%;
    padding-right: 6%;
}

.body-manage-attendees .table1 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .table2 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .status {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right-bill {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
    padding-left: 1%;
    text-align: center;
    color: black;
}

问题陈述：

我想知道我需要对上面的 CSS 代码进行哪些更改，以便方框（在上面的屏幕截图中用箭头标记）显示在彩色矩形内。

Answer 1

你可以开始使用 div 函数

所以这是一个例子

.square {
  width: 50%;
  background: #000;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

<div class="square">
     
</div>

所以这是一个例子

现在有了您的代码：您可以在 JSFIDDLE

上看到这里

ofc 你可以尝试代码并添加 boostrap 这只是为了让你开始

Answer 2

.body-manage-attendees .right-itemsreceived::before {

   content: url(image.jpg); /* Insert content image here*/
    padding-right: 8px;
    color: red;

}

Answer 3

请参考这个Fiddle 我添加了一些 CSS 规则并更新了彩色矩形的 HTML 结构。

// General CSS
.nav-top-searchbar {
    position: relative;
}

#ellipsis {
    top: 12px;
    position: absolute;
    right: 43px;
    cursor: pointer;
}

#ellipsis:focus {
    outline: none;
}

#ellipsis:focus+.dropdown {
    display: block;
}

input[type=text] {
    width: 100%;
    background: #10314c;
}

.dropdown {
    background-color: #FFFFFF;
    display: none;
    /* padding-left: 2%; */
    position: absolute;
    /* height: 150px; */
    right: 0;
    width: 200px;
    z-index: 10;
    list-style-type: none;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 0 0 15px #888;
    top: 2px;
}

.searchicon {
    float: left;
    margin-top: -20px;
    position: relative;
    top: 26px;
    left: 8px;
    color: white;
    border: 1px solid #FFFFFF;
    z-index: 2;
    padding: 3px;
}

.table td,
.table th {
    border-top: none! important;
    padding-left: 3%;
}

.table thead th {
    border-bottom: none! important;
}

.table td.left {
    padding-right: 32%;
}

.dropdown a {
    color: #676767;
    font-weight: bold;
    font-size: 14px;
}

.dropdown li {
    padding-left: 20px;
}

.dropdown li:hover {
    background-color: #EDEDED;
}

.body-manage-attendees tbody tr:hover {
    background-color: #EDEDED;
}

.body-manage-attendees .number {
    padding-left: 2%;
    padding-right: 6%;
}

.body-manage-attendees .table1 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .table2 {
    padding-left: 1%;
    text-align: center;
    padding-right: 6%;
}

.body-manage-attendees .status {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right {
    padding-left: 1%;
    text-align: center;
}

.body-manage-attendees .right-bill {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-nobill {
    padding-left: 1%;
    text-align: center;
    color: black;
}

.body-manage-attendees .right-unapid {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #1173B7;
}

.body-manage-attendees .right-itemsreceived {
    padding-left: 1%;
    color: white;
    text-align: center;
    background-color: #10314C;
}

.body-manage-attendees .right-itemswaiting {
    padding-left: 1%;
    text-align: center;
    color: white;
    background-color: #10314C;
}

.body-manage-attendees .right-unpaid {
    padding-left: 1%;
    color: white;
    background-color: #1173B7;
    text-align: center;
}

.nav-top-bar {
    display: flex;
    justify-content: space-between;
    padding: 0% 2.5%;
    background: rgb(16, 49, 76);
    align-items: center;
}

.square {
  display: inline-block;
  border-radius: 5px;
  border: 1px solid white;
  height: 15px;
  width: 15px;
  vertical-align: middle;
}

.right-itemsreceived span{
    vertical-align: middle;
    padding-left: 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</th>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>
            
            <tr>
                <td class="left">Eve Doe</td>
                <td class="number1">250</td>
                <td class="table1">4</td>
                <td class="right-itemsreceived">Items Received</td>
            </tr>
            <tr>
                <td class="left">Fred Doe</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemsreceived"><div class="square"></div><span>Items Received</span></td>
            </tr>
            <tr>
                <td class="left">Fred Doe's Guest 1</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemswaiting"> Items Waiting</td>
            </tr>
            <tr>
                <td class="left">Jack Doe</td>
                <td class="number1">14</td>
                <td class="table1">4</td>
                <td class="right-unpaid">Unpaid</td>
            </tr>
        </tbody>
    </table>
</div>

Answer 4

<div class="body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</enter code hereth>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td class="left">Eve Doe</td>
                <td class="number1">250</td>
                <td class="table1">4</td>
                <td class="right-itemsreceived">
                <input  type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>
             </tr>
            <tr>
                <td class="left">Fred Doe</td>
                <td class="number1">250</td>
                <td class="table1">2</td>
                <td class="right-itemsreceived">
                <input  class="right-itemsreceived" type ="checkbox"/><span style="padding-left:15px">Items Received<span></td>

            </tr>
            <tr>
                <td class="left">Fred Doe's Guest 1</td>
                <td class="number1">250</td>
                <td class="table1">2</td>

                <td class="right-itemswaiting"><input type ="checkbox"/><span style="padding-left:15px"> Items Waiting</td>
            </tr>
            <tr>
                <td class="left">Jack Doe</td>
                <td class="number1">14</td>
                <td class="table1">4</td>
                <td class="right-unpaid"><input type ="checkbox"/><span style="padding-left:15px">Unpaid</td>
            </tr>
        </tbody>
    </table>
</div>

只需将这些更改添加到您的代码中，即可将复选框添加到您的 table 数据中

或在此处https://jsfiddle.net/nc2djn5p/151/查看演示

如何在有文字的矩形内制作一个小正方形？

How to make a small square inside a rectangle having text?

html

css

rectangles

bootstrap-4

所以这是一个例子