Question

我目前有类似的东西::

<html>
    <head>
    <style>
       UseA
           {
            border-radius: 10px;
            background: #BADA55;
            height:500px;
            width:500px;
           }
    </style>
    </head>
  <body>    

        <UseA>
                Hello , My name is Jim Some thing to test
        </UseA>

  </body>
 </html>

我的输出是这样的

enter image description here

如何增加样式标记的宽度和长度，使其看起来像我的要求

Answer 1

默认情况下，您的非标准元素显然是内联的。

http://jsfiddle.net/isherwood/52RCt/

UseA {
    display: inline-block; /* or 'block', depending on your needs */
}

但是，使用标准HTML可能会更好：

<div class="UseA">...</div>

在后一种情况下，不需要额外的CSS，因为div默认是块级元素。

Answer 2

将显示块添加到您的css

  UseA {
      border-radius: 10px;
      background: #BADA55;
      height:500px;
      width:500px;
      display:block;
  }

检查这个小提琴，http://jsfiddle.net/victorrseloy/9gwNX/

Answer 3

与任何其他未定义的HTML标签一样，此“UseA”具有默认的“display：inline”。内联标签的宽度和高度始终是自动的。

你应该给它“display：block”或“display：inline-block”。所以：

   UseA
       {
        display: block;
        border-radius: 10px;
        background: #BADA55;
        height:500px;
        width:500px;
       }

P.S。恕我直言，你应该学习一些关于谷歌的“流体设计”。

Answer 4

您可以做的最好的事情是将已制作的UseA元素更改为div。由于div元素的标准设置，不需要添加内联块。

<html>
    <head>
    <style>
       div#useA
           {
            border-radius: 10px;
            background: #BADA55;
            height:500px;
            width:500px;
           }
    </style>
    </head>
  <body>    

        <div id="useA">
                Hello , My name is Jim Some thing to test
        </div>

  </body>
 </html>

Answer 5

像这样在你的班级上使用填充。另外，不要使用非标准的html元素。的 Fiddle here

.UseA { border-radius: 10px; background: #BADA55; padding:30px; }

你的HTML

<div class="UseA">Hello , My name is Jim Some thing to test</div>

增加样式的宽度

5 个答案: