垂直更多虚线选项

Question

我想添加一个右边框，并在html页面上点击它。它应该类似于下面的截图。如何在没有任何插件的简单HTML，CSS或bootstrap中实现它？

我尝试使用border-right到div，这使得div内的其他链接可以点击。

我也尝试过伪。还有以下内容:(我需要它用于虚线边框）

<div class="dotted-border">

					<!--Assigned Room-->
					<div
						ng-if="selectedRoom.assignedRoomDetail.roomNumber !== null && selectedRoom.assignedRoomDetail.roomNumber !== undefined">

						<!--Shared room-->
						<span ng-if="quickRoomChangeVm.isSharedReservation"> <img
							title="Shared Room Reservation" class="alignWithText"
							src="/ui/assets/images/QuickCheckIn/shared_white.png" />&nbsp;
						</span> <span
							ng-attr-title="Room {{selectedRoom.id + 1}}: {{selectedRoom.assignedRoomDetail.roomNumber}}">
							<span class="roomCount"> Room {{selectedRoom.id +1}}: </span> <span>
								{{selectedRoom.assignedRoomDetail.roomNumber}} </span>
						</span>

						<!--Lockout-->
						<span ng-if="selectedRoom.assignedRoomDetail.lockAssgn"> <img
							src="/ui/assets/images/QuickCheckIn/lock_white.png"
							title="Room cannot be changed">
						</span>

					</div>


					<!--Unassigned room-->
					<div
						ng-if="selectedRoom.assignedRoomDetail.roomNumber === null || selectedRoom.assignedRoomDetail.roomNumber === undefined">
						<!--Shared room-->
						<span ng-if="quickRoomChangeVm.isSharedReservation"> <img
							title="Shared Room Reservation" class="alignWithText"
							src="/ui/assets/images/QuickCheckIn/shared_white.png" />
						</span>

						<!--Not Assigned-->
						<span ng-attr-title="Room {{selectedRoom.id + 1 }}: Not Assigned">
							<span class="roomCount"> Room {{selectedRoom.id + 1}}: </span> <span>
								Not Assigned </span>
						</span>
					</div>

					<!--Room Status-->
					<div
						ng-if="selectedRoom.assignedRoomDetail.roomNumber !== null && selectedRoom.assignedRoomDetail.roomNumber !== undefined">
						<span
							ng-attr-title="{{selectedRoom.assignedRoomDetail.occupancyStatus | capitalize}}, {{selectedRoom.assignedRoomDetail.housekeepingStatus | capitalize}}">
							<span> {{selectedRoom.assignedRoomDetail.occupancyStatus |
								capitalize}}, </span> <span>
								{{selectedRoom.assignedRoomDetail.housekeepingStatus |
								capitalize}} </span>
						</span>
					</div>

					<!--View Full Details Link to open Pop-up-->
					<div ng-if="selectedRoom.selected">
						<span
							ng-click="openFullRoomDetailsPopup(selectedRoom.assignedRoomDetail, selectedRoom.assignedRoomDetail.connectingRoomDetail)"
							title="View Full Details"> <u>View Full Details</u>
						</span>
					</div>
                    
				</div>

Answer 1

有了这个文字：

<span class="vertical-text">...</span>

简单的CSS方法：

.vertical-text {
    transform: rotate(90deg);
    transform-origin: left top 0;
    float: right;
}

小提琴：http://jsfiddle.net/o7bm9L1o/

您也可以使用旋转图像

Answer 2

.btn-icon {
  cursor: pointer;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  padding: 0 5px;
  outline: none;
}
.dots,
.dots:before,
.dots:after {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #333;
  position: relative;
  vertical-align: middle;
}
.dots:before,
.dots:after {
  content: '';
  left: 0;
  position: absolute;
  display: inline-block;
}
.dots:before {
  margin-top: -8px;
}
.dots:after {
  margin-top: 8px;
}

<button type="button" class="btn-icon">
  <span class="dots"></span>
</button>