web-dev-qa-db-ja.com

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

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

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

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

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

htmlcssborder
168
RKh

すべてのボーダープロパティについて明確にしてみてください。例えば：

border:1px solid black;

境界の省略形のプロパティ を参照してください。他のビットはオプションですが、ブラウザによっては幅や色をデフォルトに設定しないものがあります。あなたの場合、私はそれが指定されない限りそれがゼロである幅であると思うでしょう。

308
Paolo

使える

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

または速記として

border: 2px solid black
27
user5089931

W3Cによると：

境界線スタイルの初期値は 'none'なので、境界線スタイルが設定されていない限り、境界線は表示されません。

言い換えれば、あなたはボーダーが現れるようにボーダースタイル（例えばsolid）を設定する必要があります。 border:thinは幅を設定するだけです。また、色はデフォルトでテキストの色と同じになります（通常は見栄えがよくありません）。

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

style="border: thin solid black"
16
DisgruntledGoat

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

<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です。

4
InfantPro'Aravind'

あなたが使用することができます：

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

あなたが合うと思うが、あなたはこれらを変更することができます。

4
Andoni Henderer

あなたはそれ以上のフィールドを設定する必要があります。スタイルは基本的にページに境界線を置きます。幅は太さを制御し、色は境界線の色を指定します。

border-style: solid; border-width:thin; border-color: #FFFFFF;
2
Jason Too Cool Webs

ブートストラップ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>
1
Penny Liu
 .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>
0
Muhammad Armaghan