ইনপুট পরবর্তী ফর্ম লেবেল সারিবদ্ধ করুন

Question

আমার ফর্মের খুব বুনিয়াদি এবং জ্ঞাত দৃশ্য আছে যেখানে আমাকে সঠিকভাবে ইনপুটগুলির পাশে লেবেলগুলি সারিবদ্ধ করতে হবে। তবে আমি কীভাবে এটি করতে জানি না।

আমার লক্ষ্যটি হ'ল লেবেলগুলি ডান পাশের ইনপুটগুলির পাশে সারিবদ্ধ থাকে। পছন্দসই ফলাফলের চিত্র উদাহরণ এখানে।

আমি আপনার সুবিধার্থে এবং আমার কাছে এখন যা আছে তা স্পষ্ট করার জন্য একটি ঝাঁকুনি তৈরি করেছি - http://jsfiddle.net/WX58z/

স্নিপেট:

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

Answer 1

একটি সম্ভাব্য সমাধান:

• লেবেল দিন display: inline-block;
• তাদের একটি নির্দিষ্ট প্রস্থ দিন
• ডানদিকে পাঠ্য সারিবদ্ধ করুন

এটাই:

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}​

<div class="block">
    <label>Simple label</label>
    <input type="text" />
</div>
<div class="block">
    <label>Label with more text</label>
    <input type="text" />
</div>
<div class="block">
    <label>Short</label>
    <input type="text" />
</div>

JSFiddle

Comments

যদি কিছু লেবেল চেক-বাক্স বা রেডিও বোতাম হয় তবে আমি কীভাবে এই কাজ করব? এই উপাদানগুলির লেবেলগুলি পাঠ্যবাক্স লেবেলের মতো একই নির্দিষ্ট প্রস্থের সাথে শেষ হয় যা পছন্দসই নয়। লেবেলে স্থির প্রস্থ ছাড়াই এটি করার কোনও উপায় আছে কি?

— রেবেকা মেরিটজ

@ রেবেকামারিটিজ আপনার অর্থ কি যখন মার্কআপটিতে প্রথমে চেকবক্স থাকে এবং তার পরে লেবেল থাকে? আপনি উভয় একটি ক্লাস যোগ করতে পারেন, এবং তাদের পৃথক স্টাইল। সম্ভবত আপনার এটি সম্পর্কে একটি নতুন প্রশ্ন জিজ্ঞাসা করা উচিত ।

— বিফভেরেটো

এই প্রতিক্রিয়াশীল কিভাবে? এবং কিভাবে i18n সঙ্গে সামলাতে? আমার অর্থ হ'ল পাঠ্য লেবেলগুলির বিভিন্ন ভাষায় পৃথক দৈর্ঘ্য রয়েছে, সুতরাং আমি আশঙ্কা করি যে পাঠ্য দীর্ঘ থাকলে সেটি নির্ধারিত প্রস্থের কাজটি কার্যকর হয় না।

— আজিমুথ

@ আজিমুথ আজকাল, আপনি তার পরিবর্তে সিএসএস গ্রিড ব্যবহার করতে চাইতে পারেন।

— bfavareto

এটি নির্দিষ্ট প্রস্থকে চিহ্নিত করছে, এটি সর্বাধিক লেবেলের প্রস্থের ভিত্তিতে গতিশীল হওয়া উচিত।

— সাম্যক জৈন

Answer 2

যদিও এখানে সমাধানগুলি কার্যকর হয়, তবে আমার কাছে আরও ভাল সমাধান বলে মনে করে তার জন্য আরও সাম্প্রতিক প্রযুক্তি তৈরি করেছে। সিএসএস গ্রিড লেআউটটি আমাদের আরও মার্জিত সমাধান গঠনের অনুমতি দেয়।

নীচের সিএসএস একটি 2 কলামের "সেটিংস" কাঠামো সরবরাহ করে, যেখানে প্রথম কলামটি ডান-সংযুক্ত লেবেল হিসাবে প্রত্যাশা করা হবে, দ্বিতীয় কলামের কিছু সামগ্রী অনুসরণ করবে। আরও জটিল বিষয়বস্তু <ডিভি>> এ মুড়িয়ে দ্বিতীয় কলামে উপস্থাপন করা যেতে পারে।

[পার্শ্ব-নোট হিসাবে: আমি ':' যুক্ত করতে প্রতিটি সিএসএস ব্যবহার করি যা প্রতিটি লেবেলকে অনুসরণ করে, কারণ এটি একটি শৈলীগত উপাদান - আমার পছন্দ]]

/* CSS */

div.settings {
    display:grid;
    grid-template-columns: max-content max-content;
    grid-gap:5px;
}
div.settings label       { text-align:right; }
div.settings label:after { content: ":"; }

<!-- HTML -->

<div class="settings">
    <label>Label #1</label>
    <input type="text" />

    <label>Long Label #2</label>
    <span>Display content</span>

    <label>Label #3</label>
    <input type="text" />
</div>

Comments

আরে, আপনি একটি ফিডল যোগ করতে পারেন দয়া করে?

— স্ট্যান

হ্যাঁ, আমি স্নিপেট ব্যবহার করতে উত্তর আপডেট করেছি updated

— ডেভিড রাদারফোর্ড

কোন ক্রোম সংস্করণ এবং প্ল্যাটফর্ম নিয়ে আপনার সমস্যা হচ্ছে?

— ডেভিড রাদারফোর্ড

সন্তোষজনক সমাধান! ক্রোম 73 এ এখন দুর্দান্ত কাজ করে

— ফিলিপ মাইকেলসকি

অসাধারণ! যদি আপনি উপরের কলামগুলির সংজ্ঞাটি প্রতিস্থাপন করেন grid-template-columns: max-content 1fr;তবে দ্বিতীয় কলামটি সমস্ত অবশিষ্ট প্রস্থ ব্যবহার করবে। এটি আমার কাছে এই জাতীয় লেআউটগুলির পবিত্র ক্রেডিট, যেখানে কোনও কলাম বা বিষয়বস্তুর প্রস্থ নির্দিষ্ট করা উচিত নয় এবং সমস্ত কিছু স্বয়ংক্রিয়ভাবে উপলভ্য জায়গাতে পুরোপুরি ফিট করে fits

— জেফ-এইচ

Answer 3

আগে যেমন একটি প্রশ্নের উত্তর, আপনি এখানে ফলাফল একবার দেখে নিতে পারেন:

একে অপরের পাশে ক্ষেত্র এবং পাঠ্য রাখতে ফর্ম তৈরি করা - এটি করার অর্থপূর্ণ উপায় কী?

সুতরাং আপনার ফিডলে একই নিয়ম প্রয়োগ করতে আপনি display:inline-blockআপনার লেবেল এবং ইনপুট গোষ্ঠী পাশাপাশি পাশাপাশি প্রদর্শন করতে পারেন :

সিএসএস

input {
    margin-top: 5px;
    margin-bottom: 5px;
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    vertical-align:middle;
    margin-left:20px
}

label {
    display:inline-block;
    *display: inline;     /* for IE7*/
    zoom:1;              /* for IE7*/
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 140px;
}

আপডেট

Comments

এটি আপনাকে অবশ্যই লেবেলের প্রস্থের হার্ড-কোড করতে হবে তা বাদ দিয়ে এটি খুব সুন্দর সমাধান। যদি কোনও নতুন লেবেল খুব দীর্ঘ হয় - লেআউটটি ভেঙে যায়। আরও শক্তিশালী সমাধান হওয়া উচিত বলে মনে হচ্ছে?

— mattstuehler

Answer 4

আমি এর অনুরূপ কিছু ব্যবহার করি:

<div class="form-element">
  <label for="foo">Long Label</label>
  <input type="text" name="foo" id="foo" />
</div>

শৈলী:

.form-element label {
    display: inline-block;
    width: 150px;
}

Answer 5

আপনি ফ্লেক্স-বাক্স ব্যবহার করার চেষ্টা করতে পারেন

<head><style>
body {
    color:white;
    font-family:arial;
    font-size:1.2em;
}
form {
    margin:0 auto;
    padding:20px;
    background:#444;
}
.input-group {
    margin-top:10px;
    width:60%;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
label, input {
    flex-basis:100px;
}
</style></head>
<body>

<form>
    <div class="wrapper">
        <div class="input-group">
            <label for="user_name">name:</label>
            <input type="text" id="user_name">
        </div>
        <div class="input-group">
            <label for="user_pass">Password:</label>
            <input type="password" id="user_pass">
        </div>
    </div>
</form>

</body>
</html>

Comments

এটি সুন্দর, তবে তিনি যা চেয়েছিলেন তা মোটেই নয়। ছবিটি অপারেটিং

— phorgan1

Answer 6

আমি জানি এটি একটি পুরানো থ্রেড তবে এর চেয়ে সহজ সমাধান হ'ল লেবেলের অভ্যন্তরে কোনও ইনপুট এম্বেড করা:

<label>Label one: <input id="input1" type="text"></label>

Comments

আমি এর জন্য একটি সমাধান খুঁজছিলাম (লেবেলের ভিতরে ইনপুট অন্তর্ভুক্ত করুন) তবে প্রান্তিক পাঠ্য সহ

— নাটিম

Answer 7

সমস্ত ফর্ম লেবেলের জন্য এখানে জেনেরিক লেবেলের প্রস্থ রয়েছে। প্রস্থ কিছুই ঠিক নেই।

সমস্ত লেবেল সহ কল ​​লেবেলউইথ ক্যালকুলেটর কল করুন। এই ফাংশনটি ইউআইতে সমস্ত লেবেল লোড করবে এবং সর্বাধিক লেবেলের প্রস্থ সন্ধান করবে। সমস্ত লেবেলে নীচের ফাংশনের রিটার্ন মান প্রয়োগ করুন।

     this.setLabelWidth = function (labels) {
            var d = labels.join('<br>'),
                dummyelm = jQuery("#lblWidthCalcHolder"),
                width;
            dummyelm.empty().html(d);
            width = Math.ceil(dummyelm[0].getBoundingClientRect().width);
            width = width > 0 ? width + 5: width;
            //this.resetLabels(); //to reset labels.
            var element = angular.element("#lblWidthCalcHolder")[0];
            element.style.visibility = "hidden";
            //Removing all the lables from the element as width is calculated and the element is hidden
            element.innerHTML = "";
            return {
                width: width,
                validWidth: width !== 0
            };

        };

Answer 8

আপনি এর মতো কিছু করতে পারেন:

এইচটিএমএল:

<div class='div'>
<label>Something</label>
<input type='text' class='input'/>
<div>

সিএসএস:

.div{
      margin-bottom: 10px;
      display: grid;
      grid-template-columns: 1fr 4fr;
}

.input{
       width: 50%;
}

আশাকরি এটা সাহায্য করবে ! :)