CODEWITHSUNDEEP
htmlcss
Swap L
Swap L

Reputation: 718

How to get border Around <ul> tag?

My code is as follows :

<ul class="connected list no2">
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

I want border around this <ul> tag

I tried as follows :

<div style="border:2px solid #a1a1a1;">
 <ul class="connected list no2">
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
    </ul>
 </div>

but it is showing div above the <ul>

Any suggestion on this please.

Upvotes: 7

Views: 53901

Answers (4)

ElliotSchmelliot
ElliotSchmelliot

Reputation: 8402

Why not just target the ul tag?

CSS File:

ul {
    border: 1px solid black;
}

Inline CSS:

<ul class="connected list no2" style="border: 1px solid black">

Here is the fiddle if you'd like to play with it.

Upvotes: 13

Krish R
Krish R

Reputation: 22741

Instead of applying style to div tag, you can apply to ul tag 

    <div>
    <ul class="connected list no2"  style="border:2px solid #a1a1a1;">
    <li>Item 11</li>
    <li>Item 12</li>
    <li>Item 13</li>
    <li>Item 14</li>
    <li>Item 15</li>
    <li>Item 16</li>
    </ul>
    </div>

OR, You can add css properties to any one of css class name you have added in ul tag already like connected list no2

.list{
  border:2px solid #a1a1a1;
}

Upvotes: 1

Roy M J
Roy M J

Reputation: 6948

Jsbin : http://jsbin.com/aQUteTO/1/

HTML : 

<div style="border:2px solid #a1a1a1;">
    <ul class="connected list no2">
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
    </ul>
</div>

CSS : 

.connected{
  border:1px solid #FF0000
}

You can really avoid the Div as you just need to apply style to the corresponding class of ul.

So combined : 

<ul class="connected list no2">
      <li>Item 11</li>
      <li>Item 12</li>
      <li>Item 13</li>
      <li>Item 14</li>
      <li>Item 15</li>
      <li>Item 16</li>
</ul>

.connected{
    border:1px solid #a1a1a1
}

Upvotes: 1

Karuppiah RK
Karuppiah RK

Reputation: 3964

<ul class="connected">
  <li>Item 11</li>
  <li>Item 12</li>
  <li>Item 13</li>
  <li>Item 14</li>
  <li>Item 15</li>
  <li>Item 16</li>
</ul>

.connected
    {
       border: 1px solid #000;
       list-style-type: none;
    }

Fiddle

Upvotes: 1

Related Questions