ডান সারিবদ্ধ একটি বোতাম রাখুন

Question

আমি একটি বোতাম ডান সারিবদ্ধ করার জন্য এই কোডটি ব্যবহার করি।

<p align="right">
  <input type="button" value="Click Me" />
</p>

তবে <p>ট্যাগগুলি কিছু জায়গা নষ্ট করে, তাই <span>বা এর সাথে একই কাজ করার জন্য সন্ধান করছে <div>।

Comments

alignঅ্যাট্রিবিউট এইচটিএমএল 4.01 মধ্যে অনুমোদিত নয় এবং HTML5 এর মধ্যে অসমর্থিত CSS কোড ব্যবহার text-alignপরিবর্তে একই প্রভাব অর্জন করা।

— ব্রাজিলিয়ান গায়

Answer 1

আপনি কোন প্রান্তিককরণ কৌশল ব্যবহার করেন তা আপনার পরিস্থিতির উপর নির্ভর করে তবে মূলটি হ'ল float: right;:

<input type="button" value="Click Me" style="float: right;">

আপনি সম্ভবত আপনার ফ্লোটগুলি সাফ করতে চাইবেন তবে overflow:hiddenএটি প্যারেন্ট পাত্রে বা ধারকটির <div style="clear: both;"></div>নীচে একটি স্পষ্টত দিয়ে করা যেতে পারে ।

উদাহরণস্বরূপ: http://jsfiddle.net/ambiguous/8UvVg/

ভাসমান উপাদানগুলি সাধারণ দস্তাবেজ প্রবাহ থেকে সরানো হয় যাতে তারা তাদের পিতামাতার সীমানাকে উপচে ফেলে এবং পিতামাতার উচ্চতা জগাখিচু করতে পারে, clear:bothসিএসএস সেটির যত্ন নেয় (যেমন করে overflow:hidden)। জেএসফিডাল উদাহরণটি ঘুরে দেখি আমি ভাসমান এবং সাফ করার পদ্ধতিটি কীভাবে আচরণ করে তা জুড়ে দিয়েছি ( overflow:hiddenযদিও আপনি প্রথমটি ড্রপ করতে চাইবেন )।

Answer 2

আর একটি সম্ভাবনা হ'ল ডানদিকে ভিত্তি করে একটি পরম অবস্থান নির্ধারণ:

<input type="button" value="Click Me" style="position: absolute; right: 0;">

এখানে একটি উদাহরণ: https://jsfiddle.net/a2Ld1xse/

এই সমাধানটির ডাউনসাইড রয়েছে তবে এটি ব্যবহারের ক্ষেত্রে খুব দরকারী।

Comments

আপনি যদি পজিশন যোগ করেন: পিতামাত্ত্বিক উপাদানটির সাথে তুলনামূলকভাবে, এটি দুর্দান্ত কাজ করে!

— DHRUV GAJWA

Answer 3

যদি বোতামটি কেবলমাত্র elementতে থাকে block:

.border {
  border: 2px blue dashed;
}

.mr-0 {
  margin-right: 0;
}
.ml-auto {
  margin-left:auto;
}
.d-block {
  display:block;
}

<p class="border">
  <input type="button" class="d-block mr-0 ml-auto" value="The Button">
</p>

যদি এখানে অন্য elements থাকে block:

.border {
  border: 2px indigo dashed;
}

.d-table {
  display:table;
}

.d-table-cell {
  display:table-cell;
}

.w-100 {
  width: 100%;
}

.tar {
  text-align: right;
}

<div class="border d-table w-100">
  <p class="d-table-cell">The paragraph.....lorem ipsum...etc.</p>
  <div class="d-table-cell tar">
    <button >The Button</button>
  </div>
</div>

সাথে flex-box:

.flex-box {
  display:flex;
  justify-content:space-between;
  outline: 2px dashed blue;
}

.flex-box-2 {
  display:flex;
  justify-content: flex-end;
  outline: 2px deeppink dashed;
}

<h1>Button with Text</h1>
<div class="flex-box">
<p>Once upon a time in a ...</p>
<button>Read More...</button>
</div>

<h1>Only Button</h1>
<div class="flex-box-2">
  <button>The Button</button>
</div>

<h1>Multiple Buttons</h1>
<div class="flex-box-2">
  <button>Button 1</button>
  <button>Button 2</button>
</div>

শুভকামনা ...

Comments

margin-left:autoমহান! !importantখারাপ, এটা ভবিষ্যতে সমস্যার সৃষ্টি পাবেন।

— টম ব্রিটো

হাই @ টমব্রিটো, আমি উত্তরটি সাথে আপডেট করেছি display: flex;। এটি সবকিছুর যত্ন নেয়।

— আকাশ

এই উত্তরটির জন্য এটি ক্রেডিট পাওয়ার চেয়ে উত্তম ... কেবল ব্যবহার করবেন না! গুরুত্বপূর্ণ

— tpie

Answer 4

@ গ্যান্থার-জেনার নির্দেশ অনুসারে এই সমাধানটি বুটস্ট্র্যাপ 3 এর উপর নির্ভর করে

ব্যবহার করে দেখুন <a class="btn text-right">Call to Action</a>। ভাসমান উপাদানগুলি সাফ করার জন্য আপনার অতিরিক্ত মার্কআপ বা নিয়মের দরকার নেই don't

Comments

দুঃখিত সংশোধন, এটি কেবল তখনই কাজ করে যখন আপনি অ্যাঙ্কার ট্যাগের জন্য পিতামাত্রের পাত্রে "টেক্সট-ডান" রাখবেন।

— জোনাথন লালিবার্তে

Answer 5

ফ্লেক্স-বাক্স ব্যবহার করে 2019 এ একটি আধুনিক পদ্ধতি

সঙ্গে DIV আছে ট্যাগটি

<div style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

সঙ্গে বিঘত ট্যাগ

<span style="display:flex; justify-content:flex-end; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</span>

Answer 6

অন্য সম্ভাবনা হ'ল ডানদিকে ভিত্তি করে একটি পরম অবস্থান নির্ধারণ করা। আপনি এটি এইভাবে করতে পারেন:

style="position: absolute; right: 0;"

Comments

অবশ্যই, তবে যদি কোনও অভিভাবক থাকে তবে divএটি দৃ this়তার সাথে এর সীমানা উপেক্ষা করবে।

— হাসান বাইগ

Answer 7

এটি সর্বদা এত সহজ নয় এবং কখনও কখনও প্রান্তিককরণটি ধারকটিতে সংজ্ঞায়িত করা উচিত এবং বোতামের উপাদানটিতেও নয়!

আপনার ক্ষেত্রে, সমাধান হবে

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me"/>
</div>

আমি width=100%নিশ্চিত হয়েছি যে <div>তার ধারকটির পুরো প্রস্থ হবে specify

padding:0স্থান হিসাবে আগে এবং পরে এড়ানোর জন্য আমি যুক্ত করেছি<p> উপাদান ।

আমি বলতে পারি যে যদি <div>কোনও এফএসএফ / প্রাইমফেসস টেবিলের ফুটারে সংজ্ঞায়িত করা হয় তবে float:rightসঠিকভাবে কাজ করবেন না কারণ বোতামের উচ্চতা ফুটারের উচ্চতার চেয়ে বেশি হয়ে যাবে!

এই প্রাইমফেসের পরিস্থিতিতে text-align:rightপাত্রে ব্যবহৃত একমাত্র গ্রহণযোগ্য সমাধান ।

এই সমাধানটি সহ, ডানদিকে প্রান্তিককরণের জন্য যদি আপনার 6 টি বাটন থাকে তবে আপনার কেবল কনটেইনারটিতে এই সারিবদ্ধটি নির্দিষ্ট করতে হবে :-)

<div style="text-align:right; width:100%; padding:0;">
    <input type="button" value="Click Me 1"/>
    <input type="button" value="Click Me 2"/>
    <input type="button" value="Click Me 3"/>
    <input type="button" value="Click Me 4"/>
    <input type="button" value="Click Me 5"/>
    <input type="button" value="Click Me 6"/>
</div>

Answer 8

পৃষ্ঠার প্রবাহে বোতামটি রাখতে:

<input type="button" value="Click Me" style="margin-left: auto; display: block;" />

(স্টাইলটি একটি .ssss ফাইলে রাখুন, ভাল রক্ষণাবেক্ষণের জন্য এই এইচটিএমএল ইনলাইনটি ব্যবহার করবেন না)

Answer 9

এটি সমাধান করবে।

<input type="button" value="Text Here..." style="float: right;">

আপনার কোড দিয়ে শুভ কামনা!

Comments

এটি শীর্ষ স্কোর উত্তরের একটি অনুলিপি

— গন্তার জেনা

Answer 10

আমার ক্ষেত্রে

<p align="right"/>

ভাল কাজ

Comments

এটি কোনও উত্তর নয় প্রান্তিককরণের বৈশিষ্ট্যটি এইচটিএমএল 4.01 এ অবহিত এবং এইচটিএমএল 5 এ অসমর্থিত, একই প্রভাব অর্জনের জন্য সিএসএস টেক্সট-সারিবদ্ধ ব্যবহার করুন

— Sfili_81

Answer 11

<div style = "display: flex; justify-content: flex-end">
    <button>Click me!</button>
</div>

Comments

আপনার উত্তরের জন্য আরও কিছু প্রসঙ্গ দরকারী হবে।

— ডেভিড ক্লার্ক