Question

请看图片，想要那样对齐

嗨，

我想将已验证和RFD定位到显示的位置，经过上面的RFD验证，并且在位置和播出日期旁边都正确对齐。

这是我的HTML

<div class="col-md-10 session-col">
                <table id="session-details" data-bind="css: !$parents[1].newSessionBlocker() ? 'no-session' : ''">
                    <tbody>
                        <tr>
                            <td>
                                <table class="inner-table">
                                    <tr style="min-width: 267px; width: 100%;">
                                        <td class="grey">
                                            <strong class="text-danger">*</strong><label for="sessionType">Session Type</label>
                                        </td>
                                        <td>
                                            <select class="form-control entities form-len" id="sessionDropdown"
                                                    data-bind="disable: sessionHasBeenSaved(),
                                                               event:{ change:$parent.sessionTypeChanged},
                                                               options: $parents[1].sessionTypes,
                                                               value: sessionType,
                                                               optionsCaption: 'Choose...' ,
                                                               css:{ 'cell-error': !$parents[1].newSessionBlocker()}"></select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="grey" style="white-space: nowrap">
                                            <strong class="text-danger">*</strong><label>Session Name</label>
                                        </td>
                                        <td>
                                            <input id="session-name" class="form-control entities" data-bind="value: title, disable: $parent.isSessionReadOnly" required placeholder="Required" maxlength="100" />
                                        </td>
                                  </tr>
                                    <tr>
                                        <td class="grey">
                                            <span class="text-danger" data-bind="visible: sessionType() === document.appConfig.itemTypes.multiSegment">*</span><label>DSID</label>
                                        </td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: externalId, disable: $parent.isSessionReadOnly, attr: {placeholder: getMultiSegConditionalRequiredPh}" maxlength="90" />
                                        </td>
                                      </tr>
                                </table>
                            </td>
                                <td>
                                <table class="inner-table">
                                    <tr>
                                        <td class="grey">
                                            <span class="text-danger" data-bind="visible: sessionType() === document.appConfig.itemTypes.multiSegment">*</span><label>Series Name</label>
                                        </td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: textTitle, disable: $parent.isSessionReadOnly, attr: {placeholder: getMultiSegConditionalRequiredPh}" maxlength="100" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="grey"><label>Episode #</label></td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: episodeNumber, disable: $parent.isSessionReadOnly" maxlength="25" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="grey"><label>Episode Name</label></td>
                                        <td>
                                            <input class="form-control entities"
                                                   data-bind="value: ptsEpisode, disable: $parent.isSessionReadOnly" maxlength="200" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td class="list3">
                                <div >
                                    <table class="inner-table">
                                        <tr>
                                            <td class="grey"><label>Location</label></td>
                                            <td >
                                                <input class="form-control entities new"
                                                       data-bind="value: location, disable: $parent.isSessionReadOnly" maxlength="250" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="grey"><label class="list3">Air Date</label></td>
                                            <td>
                                                <div style="position:relative; width: 100%">
                                                    <div class='date' id='datetimepicker'>
                                                        <input type="text" id="datepicker" size="10" style="height: 30px;" class="form-control hasDatepicker entities input-datepicker with-calendar-icon"
                                                               data-date-format="mm/dd/yyyy" enable="false" data-bind="numeric: true, value: airDate, disable: $parent.isSessionReadOnly" maxlength="8" />
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>

                                        <tr>
                                            <td class="grey"><label>Year</label></td>
                                            <td>
                                                <select class="form-control entities" data-bind="options: $parent.years,
                                                                                    disable: $parent.isSessionReadOnly,
                                                                                    value: year,
                                                                                    optionsCaption: 'Choose...'"></select>
                                            </td>
                                        </tr>
                                    </table>

                                </div>

                            </td>
                            <td>
                                <table class="inner-table">
                                    <tr>
                                        <label  id="description"style="padding-top: 7px;">Description</label>
                                        <textarea class="form-control entities" style="resize: none;" maxlength="4000" id="desc-text"
                                                      data-bind="value: description, disable: $parent.isSessionReadOnly"></textarea>
                                     </tr>
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
              </div>
<div class="verify-checkbox" style="margin-left: 21px !important">
                    <div class="checkbox checkbox-primary pull-left">
                        <input type="checkbox" id="logger-verify" data-bind="checked: sessionStatus, disable: !$parent.parentLogger().isContentOwner() || (oldSessionStatus && $parent.parentLogger().isContentOwner())">
                        <label for="logger-verify">Verified</label>

                    </div>
                    <div class="checkbox checkbox-primary pull-left w40">
                        <input type="checkbox" id="logger-rfd"
                               data-bind="checked: readyForDistribution, disable: readyForDistributionDisabled, click: readyForDistributionChange">
                        <label for="logger-rfd">RFD</label>
                    </div>
                </div>


CSS
     #session-details .inner-table tr:last-child > td {
    border-bottom: none !important;
    width:initial;
}

#session-name{
    background:#2A2F3B;
    opacity:10%;
    border-color:#2A2F3B;
    color:#FFFFFF;
}

#sessionDropdown{
    background:#2A2F3B;
    opacity:10%;
    border-color:#2A2F3B;
    color:#FFFFFF;
}


#session-details>tbody>tr>td{
    padding: 0;
    vertical-align: top;
}
#session-details .checkbox{
    margin:0 10px 0 0!important;

}
#session-details{
    margin:5px!important;
    color:#FFFFFF;
}
.verify-checkbox{
    margin:5px!important;
    color:#FFFFFF;
    margin-top:20px;
}


#session-details textarea.form-control {
      height: 90px!important;
      width:80%;
      margin-left:75px;
}
table#session-details.no-session > tbody > tr > td, table#session-details.no-session .inner-table tr {
    display: none;
}

table#session-details.no-session > tbody > tr > td:first-child, table#session-details.no-session .inner-table tr:first-child {
    display: table;    
}

table#session-details.no-session > tbody > tr > td:first-child {}

table#session-details.no-session {
    border: none;
}
#session-details .form-control {
    height: 30px!important;
    left:0px;

}

请帮帮我..

Answer 1

我建议您不要使用表格进行布局，因为它不像其他方法那样灵活，而且屏幕阅读器用户无法访问它（WebAim有一些很好的资源。主题）。

您可以将veify-checkbox div作为第五个td移到桌子内吗？

Answer 2

我可以通过将项目放在表格中作为另一个表格单元格来移动项目旁边的复选框和文本。感谢@ Tommaso-Boggia。然后，我应用了一些好的ole CSS来使它们恰到好处地定位。我还在“描述”框中添加了一些余量。看看我一起扔的codepen。

改变了两个CSS：

#session-details textarea.form-control,
#description{
      height: 90px!important;
      width:80%;
      margin-left:125px;
}

和

.verify-checkbox{
  position:absolute;
  top:0;
  line-height:3;
}

在HTML中对齐元素时遇到问题

2 个答案: