راست چین کردن عنوان در کلاس border-lable-flt چگونه است ؟

10:26:00 PM - 1399/08/14

همانطور که می دانید در bootstrap بحثی وجود دارد تحت عنوان border-lable-flt که در واقع خود یک css است اینها جعبه متنی می سازند بوردر دار و عنوان دار به فرم زیر

اما عنوان در سمت چپ قرار دارد خیلی تلاش کردم به سمت راست بیایند اما نشد در حالیکه در خیلی از سایتها این کار شده (مثلا کد ملی به سمت راست منتقل شود)

نمونه کد جاوای من چنین است

<html>
<head>
<link type="text/css" rel="Stylesheet" href="CSS/bootstrap.css" />    
<link type="text/css" rel="Stylesheet" href="CSS/bootstrap-float-label.css" />
</head>
<body>
 <span class="border-lable-flt" style="padding-bottom:10px;color:Red;">
    <asp:TextBox  runat="server" cssclass="form-control   col-md-12 col-sm-12" id="txtMelliCode" 
    style="width:90%px;direction:ltr;"></asp:TextBox>
    <label for="txtMelliCode">کد ملی</label>
</span>     
 
<span class="border-lable-flt" style="padding-bottom:10px;color:Red;">
              <asp:TextBox  runat="server" cssclass="form-control   col-md-12 col-sm-12" id="txtNamFarsi" style="width:90%px"></asp:TextBox>
              <label for="txtNamFarsi">نام فارسی</label>
            </span>          
            <span class="border-lable-flt" style="padding-bottom:10px;color:Red;">
              <asp:TextBox  runat="server" cssclass="form-control   col-md-12 col-sm-12" id="txtFamFarsi" style="width:90%px"></asp:TextBox>
              <label for="txtFamFarsi">نام خانوادگی</label>
            </span>        
</body>
</html>

ویرایش شده در چهارشنبه ۱۴ آبان ۱۳۹۹ ساعت ۲۳:۳۳:۰۵

به این سوال امتیاز بدهید 0 تعداد بازدید این سوال : 3407

پاسخ دهنده : fateme 11:39:00 PM - ۱۳۹۹/۰۸/۱۴

ای کاش کدهایی که نوشتید رو جوری می نوشتید که بشه به راحتی با کپی پیست کردن در ویژوال استودیو تست کرد. ولی متاسفانه 2 لینک زیر رو به صورت لوکال آدرس دهی کردید.

<link type="text/css" rel="Stylesheet" href="CSS/bootstrap.css" />    
<link type="text/css" rel="Stylesheet" href="CSS/bootstrap-float-label.css" />

برای راست به چپ کردن بهتره هر span رو تک تک راست به چپ کنید

<span class="border-lable-flt" style="padding-bottom:10px; color:Red; direction:rtl;">
      <asp:TextBox  runat="server" cssclass="form-control col-md-12 col-sm-12" id="txtFamFarsi" style="width:90%px"></asp:TextBox>
      <label for="txtFamFarsi">نام خانوادگی</label>
</span>

ضمنا اگر توی بخش style ها نگاه کنید همه جا نوشتید :

style="width:90%px"

برای تعیین عرض یا width یا باید به صورت px (پیکسل) عرض رو تعیین کنید یا به صورت درصد و 90%px معنی نمیده !!!

به این پاسخ امتیاز بدهید 0 نظر گزارش حذف ویرایش

پاسخ دهنده : Kpa91 11:19:00 PM - ۱۳۹۹/۰۸/۱۵

به این پاسخ امتیاز بدهید 0 نظر گزارش حذف ویرایش

1 نظر

fateme : سلام در مورد فایلهای مورد استفاده شما درست می فرمایید و تمام این فایلها در گوگل با سرچ ساده وجود دارد. اما دقت بفرمایید معمولا برای دریافت پاسخ از دیگران نباید انتظار داشت که دیگران برای پاسخ به سوال شما وقت اضافی صرف کنند و به دنبال فایلهای مورد نیاز شما بگردند. سوال باید جوری پرسیده بشه که با کپی و پیست قابل تست کردن باشه. نکته بعدی این که اگر پاسخ سوال را در سایت stackoverflow قبلا دیدید بهتر هست لینکش رو قرار بدید تا بررسی بشه. در مجموع برای دریافت پاسخ باید تا حد امکان اطلاعات کافی و ساده در اختیار اشخاصی که قصد پاسخگویی دارن بذارید.

حذف امتیاز کاربر : 1549 رتبه کاربر : 1 تاریخ ثبت : ۰۳:۴۸ ۱۳۹۹/۰۸/۱۶

پاسخ دهنده : Kpa91 07:30:00 AM - ۱۳۹۹/۰۸/۱۷

به این پاسخ امتیاز بدهید 0 نظر گزارش حذف ویرایش

پاسخ دهنده : mohammad-i 05:36:00 PM - ۱۳۹۹/۰۸/۱۷

چرا از Fieldset استفاده نمیکنید؟
با fieldset و تگ legend درون اون به راحتی میشه همینکار رو کرد.
و زمانی که تگ والد رو راست چین کنید، همه ی موارد از جمله عنوان ها هم راست چین میشن.

<form style="direction:rtl" action="">
 <fieldset>
  <legend>عنوان</legend>
  <label for="fname">نام کامل:</label>
  <input type="text" id="fname" name="fname"><br><br>

 </fieldset>
</form>