এইচটিএমএলটিতে উল্লম্ব লাইনটি কীভাবে তৈরি করা যায়

Question

আপনি কীভাবে এইচটিএমএল ব্যবহার করে উল্লম্ব লাইন তৈরি করবেন?

Comments

W3 শুধু দক্ষতা সহকারে হতে হবে এবং একটি বৈশিষ্ট যোগ<vr>

— OverCoder

Answer 1

<div>মার্কআপটির চারপাশে এমন একটি জায়গা রাখুন যেখানে আপনি লাইনটি পরবর্তীটিতে প্রদর্শিত হতে চান এবং এটি স্টাইল করতে CSS ব্যবহার করুন:

.verticalLine {
  border-left: thick solid #ff0000;
}

<div class="verticalLine">
  some other content
</div>

Comments

সামগ্রীর সাথে শৈলীর সমন্বয় করা অনেকের পক্ষে নিষিদ্ধ নয়। <div શૈલી = "সীমানা-বাম: সরু শক্ত # 0000ff"> আমার বলার কিছুই নেই এবং আমি এটি বলছি </ div>

— সিটিপেনরোজ

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

— ক্রিস ভ্যান ডার মাস্ট

Answer 2

উল্লম্ব লাইন তৈরি করতে আপনি অনুভূমিক বিধি ট্যাগটি ব্যবহার করতে পারেন।

<hr width="1" size="500">

ন্যূনতম প্রস্থ এবং বড় আকার ব্যবহার করে, অনুভূমিক নিয়ম একটি উল্লম্ব হয়ে যায়।

Comments

ব্রাভো, স্যার। এটি একটি দুর্দান্ত কৌশল। তবুও এটি সেট করা দরকার display:inline-blockঅন্যথায় এটি অন্যান্য ইনলাইন উপাদানের পাশে সুন্দরভাবে বসবে না।

— অ্যালেক্স ডাব্লু

যদিও আমি মনে করি না এটি ফায়ারফক্সে কাজ করে। লাইনটি সেখানে রয়েছে, তবে দৃশ্যমান বলে মনে হচ্ছে না ...

— এডিড

এই কোডের জন্য ধন্যবাদ। এখানে এই একটি কাজ উদাহরণস্বরূপ jsfiddle হয় jsfiddle.net/ccatto/c8RQc

— Catto

জিউলিও কারণ এটি স্ক্রিনটি দুটি কলামে ভাগ করে না। আবার ডিভের মতো আপনার পছন্দসই ফলাফলের জন্য কিছু সিএসএস কর্মী ব্যবহার করা দরকার।

— ইসমাইল সাহিন

আমি এটি আরও ভাল পছন্দ করি কারণ এটির কেবল একটি দিকের দৃশ্যমান সীমানা থাকার সাথে এটি একটি গোপন ডিভ থাকার অদ্ভুততা এড়ায়। মঞ্জুর, আপনি সাধারণত ঘন্টা ব্যবহার করেন না তবে এটি আমার কাছে আরও বোধগম্য।

— লেভিনিনজা

Answer 3

আপনি একটি খালি ব্যবহার করতে পারেন <div> যেমন শৈলীযুক্ত যেমন লাইনটি প্রদর্শিত চান:

এইচটিএমএল:

<div class="vertical-line"></div>

সঠিক উচ্চতার সাথে (ওভাররাইডিং স্টাইল ইন-লাইন):

  div.vertical-line{
      width: 1px; /* Line width */
      background-color: black; /* Line color */
      height: 100%; /* Override in-line if you want specific height. */
      float: left; /* Causes the line to float to left of content. 
        You can instead use position:absolute or display:inline-block
        if this fits better with your design */
    }

<div class="vertical-line" style="height: 45px;"></div>

আপনি 3D চেহারা চাইলে সীমানাকে স্টাইল করুন:

    div.vertical-line{
      width: 0px; /* Use only border style */
      height: 100%;
      float: left; 
      border: 1px inset; /* This is default border style for <hr> tag */
    }

   <div class="vertical-line" style="height: 45px;"></div>

আপনি অবশ্যই উন্নত সংমিশ্রণগুলির সাথে পরীক্ষা করতে পারেন:

  div.vertical-line{
      width: 1px;
      background-color: silver;
      height: 100%;
      float: left;
      border: 2px ridge silver ;
      border-radius: 2px;
    }

 <div class="vertical-line" style="height: 45px;"></div>

Comments

এই সমাধানটি +1 করা ভাল কারণ এটি বিভিন্ন প্রয়োজনের জন্য সহজেই অনুকূলিতকরণযোগ্য

— ফ্যানকুশ

Answer 4

আপনি এইচটিএমএল অনুভূমিক লাইন ব্যবহার করে একটি উল্লম্ব রেখা তৈরি করতে পারেন <hr />

html, body{height: 100%;}

hr.vertical {
  width: 0px;
  height: 100%;
  /* or height in PX */
}

<hr class="vertical" />

Comments

স্ট্যান্ডার্ড হিসাবে স্টাইল স্টাইল পেতে দুর্দান্ত কৌশল <hr>। সম্ভবত সামগ্রীর পাশে ভাসতে অতিরিক্ত স্টাইলিংও প্রয়োজন (উদাহরণস্বরূপ float:left;)

— অবাক

এই "উল্লম্ব" নিয়মটি এখনও স্বাভাবিক অনুভূমিক বিধি হিসাবে উল্লম্বভাবে (পাঠ্য) উপাদানগুলিকে পৃথক করে।

— কিওয়ারটি

Answer 5

<hr>উপাদানটির সাথে কোনও উল্লম্ব সমতুল্য নেই । তবে, আপনি যে একটি পদ্ধতির চেষ্টা করতে চাইতে পারেন তা হ'ল আপনি যা আলাদা করছেন তার বাম বা ডানদিকে একটি সাধারণ সীমানা ব্যবহার করুন:

#your_col {
  border-left: 1px solid black;
}

<div id="your_col">
  Your content here
</div>

Answer 6

এইচটিএমএল 5 কাস্টম উপাদান (বা খাঁটি সিএসএস)

1. জাভাস্ক্রিপ্ট

আপনার উপাদান নিবন্ধন করুন।

var vr = document.registerElement('v-r'); // vertical rule please, yes!

*দ্য - সমস্ত কাস্টম উপাদানগুলিতে বাধ্যতামূলক।

2. সিএসএস

v-r {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* আপনার সাথে কিছুটা বেহালার প্রয়োজন হতে পারে display:inline-block|inlineকারণinline উপাদানটির উচ্চতা সমেত প্রসারিত হবে না। একটি ধারকটির মধ্যে রেখাটি কেন্দ্র করতে মার্জিনটি ব্যবহার করুন।

3. তাত্ক্ষণিক

js: document.body.appendChild(new vr());
or
HTML: <v-r></v-r>

* দুর্ভাগ্যক্রমে আপনি কাস্টম স্ব-সমাপনী ট্যাগ তৈরি করতে পারবেন না।

ব্যবহার

 <h1>THIS<v-r></v-r>WORKS</h1>

উদাহরণ: http://html5.qry.me/versical-rule

---

জাভাস্ক্রিপ্ট নিয়ে গোলযোগ করতে চান না?

আপনার নির্ধারিত উপাদানটিতে কেবল এই সিএসএস শ্রেণি প্রয়োগ করুন।

CSS

.vr {
    height: 100%;
    width: 1px;
    border-left: 1px solid gray;
    /*display: inline-block;*/    
    /*margin: 0 auto;*/
}

* উপরে নোট দেখুন।

Comments

সীমাবদ্ধতা সম্পর্কে দু: খিত, কিন্তু এটি সত্যিই দেখায়, অন্য কয়েকটি জায়গায় সত্যই কার্যকর।

— স্মার

এটি কীভাবে ঠিক করবেন?

— ওটিভিও ব্যারেটো

@ OtávioBarreto আপনি মন্তব্য করতে চাই প্রয়োজন করতে চাই display সম্পত্তিটি । এটি হয় inlineবা সেট করুন inline-block। উপরের নোটগুলি এবং উদাহরণটি url দেখুন।

— কিওয়ার্টি

Answer 7

অন্য একটি বিকল্প হ'ল 1 পিক্সেল চিত্র ব্যবহার করুন এবং উচ্চতা নির্ধারণ করুন - এই বিকল্পটি আপনাকে যেখানে আপনার প্রয়োজন সেখানে ভাসিয়ে দেবে।

যদিও সবচেয়ে মার্জিত সমাধান নয়।

Comments

এই পদ্ধতিতে কোনও ভুল নেই, বাস্তবে তারা এটি jquery ওয়েবসাইটে ব্যবহার করেন

— স্টেফেন্মুরডোক

Answer 8

আপনি যে কোনও এইচটিএমএল উপাদানের সাহায্যে উচ্চতা / প্রস্থকে সহজভাবে ব্যবহার করে উল্লম্ব রেখা আঁকতে পারেন।

#verticle-line {
  width: 1px;
  min-height: 400px;
  background: red;
}

<div id="verticle-line"></div>

Answer 9

এইচটিএমএলে উল্লম্ব লাইন তৈরি করার জন্য কোনও ট্যাগ নেই।

1. পদ্ধতি: আপনি একটি লাইন চিত্র লোড করুন। তারপরে আপনি এর স্টাইলটি সেট করুন"height: 100px ; width: 2px"

2. পদ্ধতি: আপনি <td>ট্যাগ ব্যবহার করতে পারেন<td style="border-left: 1px solid red; padding: 5px;"> X </td>

Answer 10

আপনি hr (অনুভূমিক লাইন) ট্যাগটি ব্যবহার করতে পারেন এবং এটি নীচে CSS সহ 90 ডিগ্রি ঘোরানোর চেয়েও করতে পারেন

hr {   
    transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
}

http://jsfiddle.net/haykaghabekyan/0c969bm6/1/

Comments

এটি যে কোনও পাঠ্য বা পাশে থাকা উপাদানগুলিকে ভেঙে ফেলবে।

— কিওয়ারটি

Answer 11

আমি প্রস্তাবিত "এইচআর" কোডের সংমিশ্রণটি ব্যবহার করেছি এবং আমার কোডটি কেমন দেখাচ্ছে তা এখানে:

<hr style="width:0.5px; height:500px; position: absolute; left: 315px;"/>

আমি কেবল "বাম" পিক্সেলের মানটিকে এটির স্থানে পরিবর্তন করেছি। (আমি আমার ওয়েবপৃষ্ঠায় সামগ্রী লাইন আপ করতে উল্লম্ব লাইনটি ব্যবহার করেছি এবং তারপরে আমি এটি সরিয়ে দিয়েছি))

Answer 12

একটি ডিভের মধ্যে কেন্দ্রীভূত একটি উল্লম্ব লাইন তৈরি করতে আমার মনে হয় আপনি এই কোডটি ব্যবহার করতে পারেন। আমার ধারণা, ধারকটির দৈর্ঘ্য ১০০% হতে পারে।

div.container {
  width: 400px;
}

div.vertical-line {
  border-left: 1px solid #808080;
  height: 350px;
  margin-left: auto;
  margin-right: auto;
  width: 1px;
}

<div class="container">
  <div class="vertical-line">&nbsp;</div>
</div>

Comments

সেরা আনসওয়্যার, অন্যান্য সমস্ত বাম বা ডানদিকে আটকে আছে। ধন্যবাদ!

— আবদেলহাদি লাহলু

Answer 13

& # 124 কেন ব্যবহার করবেন না, এটি | এর জন্য এইচটিএমএল বিশেষ চরিত্র

Comments

কারণ এটি কোনও উল্লম্ব লাইন নয়

— ওভারকোডার

Answer 14

আপনার লক্ষ্য যদি পাশের পাশাপাশি শিশু উপাদানগুলি (কলাম উপাদানগুলি) আলাদা করতে কোনও ধারকটিতে উল্লম্ব লাইন স্থাপন করা হয় তবে আপনি ধারকটিকে স্টাইলিংয়ের বিষয়টি বিবেচনা করতে পারেন:

.container > *:not(:first-child) {
  border-left: solid gray 2px;
}

এটি ২ য় শিশু থেকে শুরু করে সমস্ত শিশু উপাদানগুলিতে বাম সীমানা যুক্ত করে। অন্য কথায়, আপনি সংলগ্ন বাচ্চাদের মধ্যে উল্লম্ব সীমানা পান।

• >একটি শিশু নির্বাচক। এটি বামে বর্ণিত উপাদান (গুলি) এর কোনও সন্তানের সাথে মেলে।
• *সর্বজনীন নির্বাচক। এটি যে কোনও ধরণের একটি উপাদানের সাথে মেলে।
• :not(:first-child) মানে এটি তার পিতামাতার প্রথম সন্তান নয়।

ব্রাউজার সমর্থন: > *: প্রথম-শিশু এবং : নয় ()

আমি মনে করি এটি একটি সাধারণের চেয়ে ভাল .child-except-first {border-left: ...} নিয়মের , কারণ এটি উল্লম্ব রেখাগুলি ধারকের নিয়মগুলি থেকে আসে, অন্য শিশু উপাদানগুলির বিধি নয়।

এটি একটি অস্থায়ী উল্লম্ব নিয়মের উপাদান ব্যবহার করার চেয়ে ভাল কিনা (একটি অনুভূমিক নিয়ম স্টাইল করে ইত্যাদি) আপনার ব্যবহারের ক্ষেত্রে নির্ভর করবে, তবে এটি অন্তত একটি বিকল্প।

Answer 15

আরও একটি পদ্ধতি সম্ভব: এসভিজি ব্যবহার করা ।

যেমন:

<svg height="210" width="500">
    <line x1="0" y1="0" x2="0" y2="100" style="stroke:rgb(255,0,0);stroke-width:2" />
      Sorry, your browser does not support inline SVG.
</svg>

পেশাদাররা:

• আপনার যে কোনও দৈর্ঘ্য এবং দিকনির্দেশনার লাইন থাকতে পারে।
• আপনি প্রস্থ, রঙ সহজেই উল্লেখ করতে পারেন

কনস:

• এসভিজি এখন বেশিরভাগ আধুনিক ব্রাউজারে সমর্থিত। তবে কিছু পুরানো ব্রাউজার (যেমন আই 8 এবং এর চেয়ে বেশি) এটি সমর্থন করে না।

Answer 16

ডিভের ডানদিকে উল্লম্ব লাইন

    <div style="width:50%">
        <div style="border-right:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

উল্লম্ব লাইনটি ডিভের বামে

    <div style="width:50%">
        <div style="border-left:1px solid;">
            <ul>
                <li>
                    Empty div didn't shows line
                </li>
                <li>
                    Vertical line length depends on the content in the div
                </li>
                <li>
                    Here I am using inline style. You can replace it by external style or internal style.
                </li>
            </ul>
        </div>
    </div>
  

Answer 17

একটি উল্লম্ব রেখা যুক্ত করতে আপনার একটি ঘন্টা স্টাইল করতে হবে।

এখন আপনি যখন একটি উল্লম্ব রেখা তৈরি করবেন তখন এটি পৃষ্ঠার মাঝখানে উপস্থিত হবে:

<hr style="width:0.5px;height:500px;"/>

এখন আপনি যেখানে চান এই কোডটি ব্যবহার করার জন্য আপনি এই কোডটি ব্যবহার করতে পারেন:

<hr style="width:0.5px;height:500px;margin-left:-500px;margin-right:500px;"/>

এটি এটিকে বামে অবস্থান করবে, আপনি ডানদিকে অবস্থান করতে এটি বিপর্যস্ত করতে পারেন।

Answer 18

<hr>অনুভূমিক লাইনের জন্য একটি ট্যাগ রয়েছে। এটি সিএসএসের সাহায্যে অনুভূমিক রেখা তৈরি করতেও ব্যবহৃত হতে পারে:

.divider{
    margin-left: 5px;
    margin-right: 5px;
    height: 100px;
    width: 1px;
    background-color: red;
}

<hr class="divider">

প্রস্থের সম্পত্তি রেখার বেধ নির্ধারণ করে। উচ্চতার সম্পত্তি রেখার দৈর্ঘ্য নির্ধারণ করে। পটভূমির রঙের বৈশিষ্ট্য রেখার রঙ নির্ধারণ করে।

Answer 19

পূর্ববর্তী উপাদানটিতে যার পরে আপনি উল্লম্ব সারি প্রয়োগ করতে চান, আপনি সিএসএস সেট করতে পারেন ...

border-right-width: thin;
border-right-color: black;
border-right-style: solid;

Answer 20

<hr>90 ডিগ্রি ঘোরান :

<hr style="width:100px; transform:rotate(90deg);">

Answer 21

একটি ইনলাইন শৈলীর জন্য আমি এই কোডটি ব্যবহার করেছি:

<div style="border-left:1px black solid; position:absolute; left:50%; height:300px;" />

এবং এটি সরাসরি এটি কেন্দ্রে।

Answer 22

আমার একটি ইনলাইন উল্লম্ব লাইন দরকার, তাই আমি একটি বোতামটি একটি লাইনে পরিণত হওয়ার জন্য ট্রিক করেছিলাম।

<button type="button" class="v_line">l</button>

.v_line {
         width: 0px;
         padding: .5em .5px;
         background-color: black;
         margin: 0px; 4px;
        }

Answer 23

<div style="width:1px;background-color:#C0C0C0;"></div>

এটি আমার জন্য কাজ করে মহান

Answer 24

মাঝের ব্যবহারের জন্য উল্লম্ব রেখাটি কেন্দ্রের দিকে বানাতে:

position: absolute; 
left: 50%;

Comments

তিনি জিজ্ঞাসা করলেন কীভাবে একটি উল্লম্ব রেখা তৈরি করা যায়, কীভাবে মাঝখানে কেন উল্লম্ব রেখাটি তৈরি করা যায়

— ব্লাডহাউন্ড