HTML divタグの境界線を設定する方法


192

HTMLのdivタグの周囲に境界線を定義しようとしています。一部のブラウザでは境界線が表示されません。

これが私のHTMLコードです:

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

HTML divタグの境界線を設定するにはどうすればよいですか?

回答:


358

すべての境界線プロパティを明示的にしてください。例えば:

border:1px solid black;

Border shorthand propertyを参照してください。他のビットはオプションですが、一部のブラウザは幅または色を期待したデフォルトに設定しません。あなたの場合、私はそれが指定されない限りゼロである幅であることを賭けます。


1
「px」サフィックスを削除する必要がありました。
samis

1
@samisそれはあなたがしたいことではありません。
ジョエル


17

W3Cによると:

境界線スタイルの初期値は「なし」であるため、境界線スタイルが設定されていない限り、境界線は表示されません。

つまり、solidボーダーを表示するには、ボーダースタイル(など)を設定する必要があります。border:thin幅のみを設定します。また、色はデフォルトでテキストの色と同じになります(通常は見栄えがよくありません)。

3つのスタイルすべてを設定することをお勧めします。

style="border: thin solid black"

5

これはあなたが指さしているところだと思います。

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

上手。それは次のように書く必要がありますborder-width:thin

ここでリンクをクリックします(ここをクリック)さまざまな種類のボーダースタイルをチェックしてください

ピクセル単位で幅を記述することで境界線の幅を設定することもできます。(border-width:1pxなど)、最小幅は1pxです。


5

以下を使用できます。

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

ただし、必要に応じてこれらを変更できます。


2

あなただけの境界幅より多くのフィールドを設定する必要があります。スタイルは基本的にページにボーダーを配置します。幅は太さを制御し、色は境界線の色を示します。

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

1

ブートストラップ4では、ボーダーユーティリティをこのように使用できます。

<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}

イシュマエルと呼んでください。

夕食に遅刻しないでください。

イシュマエルと呼んでください。

夕食に遅刻しないでください。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.