Kéo dài một hộp văn bản có chiều rộng đầy đủ của trang với lề 5px

Tôi đang tạo một tài liệu HTML đơn giản chứa biểu mẫu mà tôi dự định sử dụng làm nội dung của một panel trong một tiện ích bổ sung của Firefox. Hiện tại tài liệu chứa một nhãn và hộp văn bản, và tôi muốn điều này kéo dài toàn bộ chiều rộng của trang với một lề 5px hai bên. Mã này của tôi:Kéo dài một hộp văn bản có chiều rộng đầy đủ của trang với lề 5px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>Phrase Indexer</title> 
    <style type="text/css" media="all"> 
    body { 
    font: 10pt arial, helvetica, sans-serif; 
    padding: 0; 
    margin: 5px; 
    position: fixed; 
    width: 100%; 
    } 
    div { 
    width: inherit 
    } 
    #phrase { 
    width: inherit; 
    } 
    </style> 

</head> 

<body> 

<div> 
<label for="phrase">Passphrase</label><br /> 
<input type="text" id="phrase" /> 
</div> 

</body> 

</html>

Điều này chủ yếu hoạt động, ngoại trừ tôi bị thiếu lề 5px ở bên phải - hộp văn bản trải dài tới mép trang. Làm thế nào tôi có thể sửa lỗi này?

Here's a Fiddle of my problem.

Nguồn

2013-04-03 Dan Stevens

Tôi đã thêm Fiddle để mọi người có thể chứng minh câu trả lời của họ cho bạn. – Jeff

Vị trí 'cố định'? Hãy thử điều này: http://jsfiddle.net/bUq32/ – dfsq

@dfsq: Tôi nghĩ rằng fiddle của bạn có nó. Tại sao không đăng bài này như một câu trả lời? – Jeff

Bạn có thể làm theo cách này:

body 
{ 
    font: 10pt arial, helvetica, sans-serif; 
} 

div 
{ 
    padding: 0.5em; 
} 

div > * 
{ 
    width: 100%; 
}

Dưới đây là bản demo JS Bin: http://jsbin.com/utabul/1

Thông tin thêm về điều này ở đây: Set CSS 100% Width Minus Padding And Margin

Nguồn

2013-04-03 16:06:13

Điều này thậm chí còn tốt hơn! Cảm ơn! –

Bạn được chào đón. Chỉ cần tìm hiểu về điều này ngày hôm nay! Cảm ơn bạn đã đăng câu hỏi ... :) –

Bạn nên thử cách này:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
    <title>Phrase Indexer</title> 
    <style type="text/css" media="all"> 
    *{ 
     margin:0; 
     padding:0; 
    } 
    body { 
    } 
    div { 
    } 
    #phrase { 
    width: 100%; 
    margin:5px; 
    } 
    </style> 

</head> 

<body> 

<div> 
<label for="phrase">Passphrase</label><br /> 
<input type="text" id="phrase" /> 
</div> 

</body> 

</html>

Nguồn

2013-04-03 15:51:53 csaron92

Điều này không thực sự sửa chữa nó, mặc dù. Thay vào đó, điều này làm cho trang cuộn sang phải. Đây là trong Fiddle: http://jsfiddle.net/NgXjW/1/ – Jeff

Vâng, bạn nói đúng. Đúng cách: * {margin: 0; padding: 0; } div { đệm: 0px 7px 0 5px; } # cụm từ { chiều rộng: 100%; } Đệm 7px thay vì 5px là do đường viền của trường nhập. – csaron92

Bạn nên thử hộp cỡ. Tôi chỉ thêm lề vào div bao bọc các phần tử biểu mẫu, loại bỏ vị trí khỏi phần thân và thêm kích cỡ hộp vào đầu vào.

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 


body { 
    font: 10pt arial, helvetica, sans-serif; 
    padding: 0; 
    margin:0; 
    /* position: fixed; */ 
} 
div { 
    display:block; 
    margin:5px; 
} 
#phrase { 
    width: 100%; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box;   /* Opera/IE 8+ */ 
}

Nguồn

2013-04-03 16:02:35

Giải pháp của bạn có vẻ thanh lịch nhất cho đến nay. Cảm ơn! –

Đặt đệm cơ thể: 5px thay vì lề, thoát khỏi vị trí cố định và đặt chiều rộng div thành 100% thay vì body - http://jsfiddle.net/xX8yA

body { 
font: 10pt arial, helvetica, sans-serif; 
padding: 5px; 
} 
div { 
width: 100%; 
} 
#phrase { 
width: inherit; 
}

Nguồn

2013-04-03 16:10:31

Kéo dài một hộp văn bản có chiều rộng đầy đủ của trang với lề 5px

Trả lời

Các vấn đề liên quan