0

css でスタイル設定されたフォーム送信ボタンがあります。現時点では、サイトの送信ボタンのみを使用しましたが、一部のページではリンクのみを使用する方が良い. 今、私はそれを変えようとしていますが、私が望む正確な結果を得ることをやめません. それらはコンテナに到達するまで拡大 (幅:100%;) し続けますが、リンクがコンテナから出てしまい、その理由がわかりません。

ボタンのようなコンテナに到達するまでリンクが成長しないのはなぜですか? ボタンとリンクの両方に同じクラスを使用し続けることをお勧めしますが、それが不可能な場合は、別の所有者を使用します。

私は簡単なフィドルを作りました

http://jsfiddle.net/QPRFK/

divが私のコンテナであると仮定します

<div>
    <input type="submit" value="submitBtn" class="btn">
</div>

<div>
    <a href="#" class="btn">link</a>
</div>

CSS

.btn {
  background-color:#EE3399;
  border:3px solid #A10055;
  display:inline-block;
  color:#26328c;
  font-family:Verdana;
  font-size:20px;
  font-weight:bold;
  padding:6px 24px;
  text-decoration:none;
  cursor: pointer;
  width: 100%;
  text-align:center;
}

div{
    width:750px;
    background:green;
    margin-bottom:1em;
}
4

2 に答える 2

3

width: 100%;これは、パディングやボーダーではなく、コンテンツのみに基づいているという事実に由来します。両方あるため、パディングとボーダーが伸びすぎています。

CSS3box-sizing: border-box;が問題を解決します。ベンダー固有のタグを使用するのが賢明です...

http://css-tricks.com/box-sizing/

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
于 2013-07-29T18:25:47.043 に答える