自定義引導標籤文本位置

添加常規標籤後，如何在右側添加自定義標籤文本[幫助]？這樣的下面的圖片......自定義引導標籤文本位置

而且這裏是我現在的工作我的代碼部分。我想補充bootstrap, jquery CDN和幾個custom css

/*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*/

<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:[email protected]">[email protected]</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-->

我希望我很快會得到有效的markup & css

來源

2017-03-18 Momin

這裏我給你，你需要在你的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 }

來源

2017-03-18 12:30:34

同時增加兩個標籤是有效的標記？ – Momin

它的工作！非常感謝 – Momin

自定義引導標籤文本位置

回答

相關問題