Jak ustawić granicę dla znacznika div HTML


193

Próbuję zdefiniować ramkę wokół znacznika div w HTML. W niektórych przeglądarkach ramka się nie pojawia.

Oto mój kod HTML:

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

Jak ustawić ramkę dla znacznika div HTML?

Odpowiedzi:


360

Spróbuj wyrazić się jasno na temat wszystkich właściwości granic. Na przykład:

border:1px solid black;

Zobacz własność Stenografia graniczna . Chociaż inne bity są opcjonalne, niektóre przeglądarki nie ustawiają domyślnej szerokości lub koloru. W twoim przypadku założę się, że szerokość wynosi zero, chyba że określono inaczej.


1
Musiałem usunąć sufiks „px”.
samis,

1
@samis To nie jest to, co chcesz robić.
Joel

29

można używać

border-width:2px;
border-style:solid;
border-color:black;

lub jako skrót

border: 2px solid black

17

Zgodnie z W3C:

Ponieważ początkowa wartość stylów obramowania to „brak”, żadne obramowania nie będą widoczne, chyba że zostanie ustawiony styl obramowania.

Innymi słowy, musisz ustawić styl ramki (np. solid), Aby ramka była wyświetlana. border:thinustawia tylko szerokość. Ponadto kolor będzie domyślnie taki sam jak kolor tekstu (który zwykle nie wygląda dobrze).

Polecam ustawienie wszystkich trzech stylów:

style="border: thin solid black"

5

Wydaje mi się, że tutaj właśnie wskazujesz ...

<div id="divActivites" name="divActivites" style="border:thin">
    <textarea id="inActivities" name="inActivities" style="border:solid">
    </textarea> 
</div> 

Dobrze. musi być napisane jakoborder-width:thin

Proszę przejść z linkiem (kliknij tutaj), aby sprawdzić różne rodzaje stylów obramowania

możesz także ustawić szerokość obramowania, pisząc szerokość w pikselach. (np. szerokość-obrzeża: 1px), minimalna szerokość to 1px.


5

Możesz użyć:

border-style: solid;
border-width: thin;
border-color: #FFFFFF;

Możesz je jednak zmienić według własnego uznania.


2

Musisz ustawić więcej pól niż tylko szerokość ramki. Styl zasadniczo umieszcza ramkę na stronie. Szerokość kontroluje grubość, a kolor określa kolor, który ma być obramowaniem.

border-style: solid; border-width:thin; border-color: #FFFFFF;

1

W bootstrap 4 możesz używać narzędzi granicznych .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<style>
  .border-5 {
    border-width: 5px !important;
  }
</style>

<textarea class="border border-dark border-5">some content</textarea>


0
 .centerImge {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 50%;
        height:50%;
    }
 <div>
 @foreach (var item in Model)
{
<span> <img src="@item.Thumbnail"  class="centerImge" /></span>
  <h3 style="text-align:center">  @item.CategoryName</h3>
}
 </div>

-3
<style>
p{border: 1px solid red}
div{border: 5px solid blue}

Nazywaj mnie Ishmael.

Tylko nie dzwoń do mnie późno na obiad.

Nazywaj mnie Ishmael.

Tylko nie dzwoń do mnie późno na obiad.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.