আমি কীভাবে আমার নেভিগেশন বারে একটি তালিকা আইটেমের পুরো অঞ্চলটিকে লিঙ্ক হিসাবে ক্লিকযোগ্য করে তুলব?

Question

আমি একটি আনর্ডারড তালিকা থেকে তৈরি একটি অনুভূমিক নেভিগেশন বার পেয়েছি এবং প্রতিটি তালিকার আইটেমটিতে এটি দেখতে সুন্দর লাগানোর জন্য প্রচুর প্যাডিং রয়েছে তবে লিঙ্ক হিসাবে কাজ করার একমাত্র ক্ষেত্রটি নিজেই পাঠ্য itself লিঙ্কটি সক্রিয় করতে আমি কীভাবে ব্যবহারকারীকে তালিকা আইটেমের যে কোনও জায়গায় ক্লিক করতে সক্ষম করতে পারি?

#nav {
  background-color: #181818;
  margin: 0px;
  overflow: hidden;
}

#nav img {
  float: left;
  padding: 5px 10px;
  margin-top: auto;
  margin-bottom: auto;
  vertical-align: bottom;
}

#nav ul {
  list-style-type: none;
  margin: 0px;
  background-color: #181818;
  float: left;
}

#nav li {
  display: block;
  float: left;
  padding: 25px 10px;
}

#nav li:hover {
  background-color: #785442;
}

#nav a {
  color: white;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
}

<div id="nav">
  <img src="/images/renderedicon.png" alt="Icon" height="57" width="57" />
  <ul>
    <li><a href="#">One1</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
    <li><a href="#">Four</a></li>
  </ul>
</div>
<div>
  <h2>Heading</h2>
</div>

Answer 1

'লি' আইটেমে প্যাডিং রাখবেন না। পরিবর্তে অ্যাঙ্কর ট্যাগ সেট করুন display:inline-block;এবং এটিতে প্যাডিং প্রয়োগ করুন।

Comments

display: inline; zoom: 1;display: inline-block;display: block;

— আই

এটি কেবলমাত্র একটি অভিযোগই সুন্দরভাবে কাজ করেছে, এটি নির্বাচিতের পরে: এটির সাথে কাজ করে বলে মনে হয় না। আমি >আমার লিঙ্ক পাঠ্যের পরে একটি প্রতীক উপস্থিত হতে চেয়েছিলাম , তবে এটি সামগ্রীটিতে রাখিনি ... আমি কেবল এটি লিখিত সামগ্রীতে রেখেছি। এটি সম্পাদন করার আরও ভাল উপায় যদি হয় তবে কৌতূহল হবে।

— counterbeing

Answer 2

আপনার অ্যাঙ্কর ট্যাগ সিএসএস সম্পত্তি হিসাবে এটি সংজ্ঞায়িত করুন:

{display:block}

তারপরে অ্যাঙ্কর পুরো তালিকার ক্ষেত্রটি দখল করবে, সুতরাং আপনার ক্লিকটি আপনার তালিকার পাশের খালি জায়গায় কাজ করবে।

Comments

আমি ইচ্ছুক, আমি উত্তর তালিকার উপরে এই উত্তরটি টেনে আনতে পারি ... এটি এই সমস্যার জন্য সেরা সমাধান !!!!

— habষভ

liআইকনের মতো অন্য কিছু থাকলে লাইনগুলি ভেঙে দেবে ।

— গ্রিংগো সুভেভ

Answer 3

নোঙ্গর ট্যাগের চেয়ে প্যাডিং ধারণ করুন li। এইভাবে, এটি সমস্ত অঞ্চল গ্রহণ করবে।

Comments

আমি আরও ভাল ব্রাউজার সমর্থনের জন্য হোকারের রাজ্যটিকে অ্যাঙ্কারে সরানোর পরামর্শ দেব।

— নিনজাবম্ব

Answer 4

এই পার্টিতে সুপার, সুপার দেরীতে, তবে যাইহোক: আপনি নমনীয় আইটেম হিসাবে অ্যাঙ্করকে স্টাইলও করতে পারেন। এটি গতিশীল আকারের / সাজানো তালিকা আইটেমগুলির জন্য বিশেষভাবে কার্যকর।

a {
  /* This flexbox code stretches the link's clickable 
   * area to fit its parent block. */
  display:        flex;
  flex-grow:      1;
  flex-shrink:    1;
  justify-content: center;
}

(ক্যাভেট: ফ্লেক্সবাক্সগুলি এখনও obvs ভালভাবে সমর্থিত নয় rescue উদ্ধারে অটোপ্রেসিক্সার!)

Comments

তবে এখন (কয়েক বছর পরে), ulফ্লেক্সটি ভালভাবে কাজ করছে তাই আমার মনে হয় এবং ফ্লেক্সবক্সের সাহায্যে মেনুটি তৈরি করার সময় এটি সেরা উত্তর ।

— লুডোভিচ কিউটি

আমি মনে করি এই উত্তরটি শীর্ষে থাকা উচিত, এখন যেহেতু সমস্ত ব্রাউজারগুলিতে ফ্লেক্সবক্স প্রয়োগ করা হয়

— মোহাম্মদ ফয়সাল

Answer 5

নিম্নলিখিত ব্যবহার করুন:

a {
  display: list-item;
  list-style-type: none;
}

Answer 6

অথবা আপনি jQuery ব্যবহার করতে পারেন:

$("li").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Comments

কেউ বলতে পারেন যে এই সমাধানটি হ'ল নোংরা জ্যাকোয়ারি সলিউশন যা প্রয়োজন হয় না কারণ আপনি এটি সিএসএস দিয়ে সহজেই করতে পারেন '। তবে সত্যি কথা বলতে - কখনও কখনও আপনি নিজেকে নিজের কোড-কোড নিয়ে কাজ করে এমন পরিস্থিতি দেখতে পান এবং সমস্ত ডিওএম কাঠামো এবং সিএসএস স্টাইলশিটগুলি জানতে (এবং 'কোডার কী চিন্তা করছিল' বুঝতে চেষ্টা করার চেষ্টা করে) আপনার কাছে সময় নেই। সুতরাং +1।

— লেবুয়েড

@ লিওময়েডের সাথে একমত, আমাদের মনে রাখতে হবে "সুন্দর" সমাধানগুলি রিয়েল লাইফে সর্বদা ব্যবহারিক হয় না।

— আনকাএলবি

Answer 7

আপনার এই সিএসএস সম্পত্তি এবং মানটি ব্যবহার করা উচিত li:

pointer-events:all;

সুতরাং, আপনি jQuery বা জাভাস্ক্রিপ্টের সাহায্যে লিঙ্কটি পরিচালনা করতে পারেন, বা একটি aট্যাগ ব্যবহার করতে পারেন , তবে এর ভিতরে থাকা সমস্ত অন্যান্য ট্যাগ উপাদানগুলির liসিএসএস সম্পত্তি থাকা উচিত:

pointer-events:none;

Answer 8

কেবলমাত্র নীচের সিএসএস প্রয়োগ করুন:

<style>
  #nav ul li {
    display: inline;
  }

  #nav ul li a {
    background: #fff;// custom background
    padding: 5px 10px;
  }
</style>

Answer 9

আমি এখানে এটি কিভাবে

<a>ইনলাইন-ব্লক তৈরি করুন এবং আপনার থেকে প্যাডিং সরান<li>

তারপর আপনি সঙ্গে খেলা করতে পারেন widthএবং heightএর <a>মধ্যে<li>

রাখুন widthকরার 100%একটি শুরুর যেমন কর এবং দেখ কিভাবে এটি কাজ করে

PS: - heightএবং পরিবর্তন করার সময় Chrome বিকাশকারী সরঞ্জামগুলির সহায়তা পানwidth

Answer 10

হাইপারলিংকের মধ্যে তালিকার আইটেমটিকে অন্য রাউন্ডের পরিবর্তে রাখুন।

উদাহরণস্বরূপ আপনার কোড সহ:

<a href="#"><li>One</li></a>

Comments

@ ড্যানিবেকেট এটি HTML5 তে বৈধ।

— টেক

@Tek কোন তা না হয় ।

— ড্যানি বেকেট

আপনি ঠিক বলেছেন, আমি অ্যাঙ্করগুলির ভিতরে অনুমোদিত ব্লক উপাদানগুলির কথা ভাবছিলাম তবে আমি জানতাম না যে উল শিশুরা এই নিয়মের ব্যতিক্রমগুলির মধ্যে একটি। w3.org/html/wg/drafts/html/master/… দ্রুত সংশোধন করার জন্য ধন্যবাদ।

— টেক

ওহ না না না ... আপনার সিনট্যাক্স এবং শব্দার্থক মার্কআপ সবেমাত্র উইন্ডো থেকে বেরিয়ে গেছে। আমার বন্ধুটিকে আর কখনও এটি করো না, এটি কেবল ওয়েবকে একটি ভয়াবহ জায়গা করে তুলেছে।

— তেওডোর সান্দু