自定义引导标签文本位置

Question

如何在添加常规标签后在右侧添加自定义标签文字，如[ 帮助 ]？像这样的图像......

这是我现在工作的代码部分。我添加bootstrap, jquery CDN和少量custom css

＆＃13;

＆＃13;

/*Start Design Lab*/

.designLab_product figure {
  border: 1px solid #dddddd;
  border-radius: 2px;
}

.designLab_head {
  background: #b3b3b3;
  border-radius: 2px;
}

.designLab_head h3 {
  color: #ffffff;
  padding-left: 10px;
  line-height: 3.2em;
  font-size: 14px;
}


/*Start Wristbands Color*/


/*Start Ink Color*/

.wbColor ul li,
.inkColor ul li {
  width: 15px;
  height: 15px;
  display: inline-block;
  cursor: pointer;
}

.wbColor ul li:first-child,
.inkColor ul li:first-child {
  width: 120px;
  height: 25px;
  display: inline-block;
  font-size: 14px;
  position: relative;
  vertical-align: middle;
  bottom: 2px;
  text-align: right;
}

.wbColor ul li:last-child,
.inkColor ul li:last-child {
  position: relative;
  bottom: 3px;
  right: 40px;
  font-size: 12px;
  font-style: italic;
}

.inkColor ul li:first-child a {
  display: inline-block;
  vertical-align: middle;
}

.wbColor ul li:nth-child(2),
.inkColor ul li:nth-child(2) {
  background: #0ca0db;
}

.wbColor ul li:nth-child(3),
.inkColor ul li:nth-child(3) {
  background: #552b83;
}

.wbColor ul li:nth-child(4),
.inkColor ul li:nth-child(4) {
  background: #285eab;
}

.wbColor ul li:nth-child(5),
.inkColor ul li:nth-child(5) {
  background: #172851;
}

.wbColor ul li:nth-child(6),
.inkColor ul li:nth-child(6) {
  background: #172851;
}

.wbColor ul li:nth-child(7),
.inkColor ul li:nth-child(7) {
  background: #00a9cb;
}

.wbColor ul li:nth-child(8),
.inkColor ul li:nth-child(8) {
  background: #b9d664;
}

.wbColor ul li:nth-child(9),
.inkColor ul li:nth-child(9) {
  background: #8c8e8b;
}

.wbColor ul li:nth-child(10),
.inkColor ul li:nth-child(10) {
  background: #836f3d;
}

.wbColor ul li:nth-child(11),
.inkColor ul li:nth-child(11) {
  background: #ec228f;
}

.wbColor ul li:nth-child(12),
.inkColor ul li:nth-child(12) {
  background: #5c798a;
}

.wbColor ul li:nth-child(13),
.inkColor ul li:nth-child(13) {
  background: #782b8f;
}

.wbColor ul li:nth-child(14),
.inkColor ul li:nth-child(14) {
  background: #75bf48;
}

.wbColor ul li:nth-child(15),
.inkColor ul li:nth-child(15) {
  background: #5f3515;
}

.wbColor ul li:nth-child(16),
.inkColor ul li:nth-child(16) {
  background: #244e33;
}

.wbColor ul li:nth-child(17),
.inkColor ul li:nth-child(17) {
  background: #00793e;
}

.wbColor ul li:nth-child(18),
.inkColor ul li:nth-child(18) {
  background: #74ccd9;
}

.wbColor ul li:nth-child(19),
.inkColor ul li:nth-child(19) {
  background: #009885;
}

.wbColor ul li:nth-child(20),
.inkColor ul li:nth-child(20) {
  background: #6fcce0;
}

.wbColor ul li:nth-child(21),
.inkColor ul li:nth-child(21) {
  background: #bc92c2;
}

.wbColor ul li:nth-child(22),
.inkColor ul li:nth-child(22) {
  background: #f49ec3;
}

.wbColor ul li:nth-child(23),
.inkColor ul li:nth-child(23) {
  background: #762732;
}

.wbColor ul li:nth-child(24),
.inkColor ul li:nth-child(24) {
  background: #982035;
}

.wbColor ul li:nth-child(25),
.inkColor ul li:nth-child(25) {
  background: #ec6b23;
}

.wbColor ul li:nth-child(26),
.inkColor ul li:nth-child(26) {
  background: #e61d2f;
}

.wbColor ul li:nth-child(27),
.inkColor ul li:nth-child(27) {
  background: #e47525;
}

.wbColor ul li:nth-child(28),
.inkColor ul li:nth-child(28) {
  background: #f6eb0f;
}

.wbColor ul li:nth-child(29),
.inkColor ul li:nth-child(29) {
  background: #ffffff;
}

.wbColor ul li:nth-child(30),
.inkColor ul li:nth-child(30) {
  background: #ffc61f;
}

.wbColor ul li:nth-child(31),
.inkColor ul li:nth-child(31) {
  background: #000;
}


/*End Ink Color*/


/*Custom Design Area*/

.cn_size {
  position: absolute;
  top: -20px;
  right: -5px;
}

.custom_design_area {
  margin-top: 50px;
  border: 1px solid #828282;
  padding: 20px;
}

.cn_custom_nameband {
  padding: 50px 0;
}

.cn_custombandBG_layer {
  background-image: url("http://i.imgur.com/zG5rlKj.png");
  background-repeat: no-repeat;
  background-size: 815px 88px;
  display: block;
  padding: 40px 0;
}

.cn_custom_layer {
  width: 212mm;
  height: 12mm;
  border: 1px solid #dddddd;
  background: transparent;
  position: relative;
  bottom: 20px;
}

.order_instruction {
  padding-top: 30px;
}

.submit_btn {
  margin-top: 30px;
}


/*End Custom Design Area
End  Design Lab*/


/*Right Side Custom Product View*/

.videoGallery_head {
  padding: 10px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}

.customProduct_description {
  border: 1px solid #828282;
  background: #f9f9f9;
  padding: 0 15px;
  margin-top: 10px;
}

.customProduct_gallery ul li {
  padding-bottom: 15px;
}


/*End Right Side Custom Product View*/

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<!--Start Main design Area-->
<div class="custom_design_area">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3">
        <div class="cn_custom_nameband">
          <div class="cn_custombandBG_layer">
            <div class="cn_custom_layer"></div>
          </div>
        </div>
        <div class="dropdown cn_size">
          <button class="btn dropdown-toggle" type="button" data-toggle="dropdown">
                                            Size
                                            <span class="caret"></span></button>
          <ul class="dropdown-menu">
            <li>
              <a href="#"><input type="radio" name="size"> Adult</a>
            </li>
            <li>
              <a href="#"><input type="radio" name="size"> Medium</a>
            </li>
            <li>
              <a href="#"><input type="radio" name="size"> Youth</a>
            </li>
            <li>
              <a href="#"><input type="radio" name="size"> Child</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="wbColor">
          <ul class="list-inline">
            <li>Wristbands Color</li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li><a href="">help</a></li>
          </ul>
        </div>
      </div>
      <div class="clearfix"></div>
      <div class="col-md-12 col-xs-12">
        <div class="inkColor">
          <ul class="list-inline">
            <li>Ink Color</li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li>
              <a href=""></a>
            </li>
            <li><a href="">help</a></li>
          </ul>
        </div>
      </div>

    </div>

    <div class="row">
      <div class="col-md-12 col-xs-12">
        <div class="row">
          <div class="cn_design_form">
            <form action="" class="form-horizontal">
              <div class="col-sm-6">
                <label for="text">Text</label> <br/>
                <input class="form-control" type="text" name="" id="text">
              </div>
              <div class="col-sm-4">
                <label for="fonts">Font</label> <br/>
                <input class="form-control" type="text" name="" id="fonts">
              </div>
              <div class="col-sm-2">
                <label for="upload">Upload Your Design</label> <br/>
                <input class="form-control" type="file" name="" id="upload">
              </div>
              <div class="col-sm-6">
                <label for="o_detailsNote">Order details</label> <br/>
                <textarea class="form-control" name="" id="o_detailsNote" cols="30" rows="5"></textarea>
              </div>

              <div class="col-sm-6">
                <div class="order_instruction">
                  <p>Write down about your design, text color or other specification, We will send you Digital proof, out 24/7 team always ready to assist you.</p>
                  <p>
                    if yu get any problem or anything which doesn't match with what you looking for, you can send us email to
                    <a href="mailto:info@wristbandshouse.com">info@wristbandshouse.com</a>
                  </p>

                </div>
              </div>

              <div class="clearfix"></div>

              <div class="col-sm-2">
                <div class="submit_btn">
                  <input class="btn btn-success form-control" type="submit" value="Submit">
                </div>
              </div>

            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!--End Main Design Area-->

＆＃13;

＆＃13;

＆＃13;

我希望很快我会得到有效的markup＆amp; css

Answer 1

这里我给你一个代码示例，你需要在你的html和css中添加，以便在你的标签右边添加标签

<label for="text">Text</label> <br/>

修改上面的代码行，如下面的

<label for="text">Text</label> 
<label class="righttext" for="text">Right Text</label> <br/>

现在将以下css添加到您的css文件

.cn_design_form .righttext
{
position: absolute;
right: 0;
color: blue;
}


div > .righttext { position: relative }