30
4
Tôi có một trang HTML trong đó div chứa một div khác chứa tất cả người dùng trong cơ sở dữ liệu (hệ thống trò chuyện), nhưng thẻ ul li không chiếm toàn bộ chiều rộng của div gốc. Đây là hình ảnh của kết quả mong đợi:http://prntscr.com/nz6byp
Tôi đã thử đặt chiều rộng thành 100%.
HTML
Trung tâm cá nhân
Điều phát hành
từ bỏ.left-sidebar{
màu nền:#F7F7F7;
phần đệm: 20px;
bán kính đường viền: 5px 0px 0px 5px;
}
.hộp tìm kiếm{
phần đệm:20px 10px;
chiều rộng: 100%;
}
.input-group-btn{
lề: tự động;
}
.search-icon{
lề: tự động;
cỡ chữ: 14px;
kích thước nền: 250%;
ảnh nền: gradient tuyến tính(sang phải, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
quá trình chuyển đổi: nền dễ dàng 0,5 giây;
màu sắc:#fff;
}
.search-icon:hover{
vị trí nền: chính giữa bên phải;
màu sắc: #fff;
}
.form-control:tiêu điểm{
đường viền: 2px liền khối #fff;
}
.chat-left-img,.chat-left-detail{
nổi: trái;
}
.left-chat{
tràn-y: cuộn;
chiều rộng: 100%;
}
.left-chat::-webkit-scrollbar-track
{
}
.left-chat::-webkit-scrollbar
{
chiều rộng: 12px;
màu nền: #F5F5F5;
}
.left-chat::-webkit-scrollbar-thumb
{
bán kính đường viền: 5px;
/*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);*/
màu nền: #DEDEDE;
}
.left-chat ul{
tràn: ẩn;
phần đệm: 0px;
}
.left-chat ul li{
kiểu danh sách: không có;
chiều rộng: 100%;
nổi: trái;
phần đệm: 5px;
lề: tự động;
màu nền: #F2F2F2;
bán kính đường viền: 0px;
quá trình chuyển đổi: nền dễ dàng 0,25 giây;
}
.left-chat ul li:hover{
màu nền: #E2E2E2
}
.chat-left-img img{
chiều rộng: 50px;
chiều cao:50px;
bán kính đường viền: 50%;
căn chỉnh văn bản: trái;
nổi: đã sửa;
phần đệm: 3px;
nền: gradient tuyến tính (sang phải, #77A1D3 0%, #79CBCA 51%, #77A1D3 100%);
kích thước nền: 250%;
}
.chat-left-detail{
chiều rộng: 100%;
}
.chat-left-detail a{
ký quỹ: 5%;
trang trí văn bản: không có;
màu: #5D5C5C;
độ dày phông chữ: 200;
}
.trực tuyến{
ký quỹ: 5%;
màu sắc:#86BB71;
cỡ chữ: 14px;
}
.ngoại tuyến{
ký quỹ: 5%;
màu:#C6C4C4;
cỡ chữ: 14px;
}
Cảm ơn sự giúp đỡ nào!
câu trả lời hay nhất
Chiều rộng của phần tử danh sách được đặt thành 100% vùng chứa, nhưng vùng chứa có phần đệm, đó là lý do tại sao bạn cho rằng nó không lấp đầy vùng chứa.
.left-sidebar có phần đệm: 20px;,bên cạnh đó .left-chat có tràn-y: cuộn. Hai quy tắc này làm cho phần tử nhỏ hơn bạn mong đợi (một số cho phần đệm gốc, một số cho chiều rộng của thanh cuộn).
bạn có thể .left-sidebar cài đặt phần đệm: 0 Và đối với .left-chat< cài đặt .tràn-y: tự động/
Bạn cũng có thể kiểm tra phần tử trên công cụ phát triển Chrome để xem điều gì đang xảy ra.
Bạn có thể thấy nó ở đây:bút viết mã
Về việc gói HTML toàn bộ chiều rộng, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/56505018/
30
4
0
Tôi có một div (tôi nghĩ là vùng chứa?) mà tôi muốn trở thành trang trung tâm. Billede 2 Tôi chỉ muốn tất cả ngữ cảnh nằm ở giữa trang, làm sao có thể được? Câu trả lời hay nhất Billede 2 dựa trên yêu cầu của bạn
Tôi vừa mới chơi đùa với jQuery và tình cờ tìm thấy chức năng Tìm. Tôi đã thử nghiệm nó như thế này: $(document).ready(function(){ $('button').click(function()
Cách tạo quy tắc để thực hiện một số việc như thế này: .container .unit:first-child(nếu nó có bên trong div.box1.extra) + .box2 { top: 50px;}
Tôi đang cố gắng hiểu tại sao trình duyệt hiển thị và khác nhau? Sau đây là ví dụ: Kết quả dự kiến cho đoạn mã số 1 là ba hộp cạnh nhau: [đen], [xanh], [đỏ]. Đoạn #2 chỉ hiển thị [đen] và [đỏ] - tại sao đoạn #
Tôi gặp một vấn đề kỳ lạ là tôi không thể sử dụng bộ chọn tiếng rít thông thường để chọn chính xác nội dung nào đó trong jQuery: hai dòng mã này không làm điều tương tự. ele.children("div.a > div").addClass("xấu
Tôi có một div chứa hai div khác div đầu tiên div thứ hai có chiều cao tối đa và do đó không thể phát triển vượt quá một mức nhất định. Nhưng hai div con có thể có kích thước bất kỳ (động
Tôi gặp vấn đề giữa hai div. div#mainbody là div cha có nền và div 2 div con có nền riêng nên div 2 nổi phía trên div cha nhưng tôi muốn nó ở bên trong div cha. HTML:
Tôi có một div bên trong một div khác có chiều rộng cụ thể, nhưng tôi muốn chiều rộng của div con là phần trăm của kích thước màn hình trình duyệt chứ không phải phần trăm của div cha của nó, có nghĩa là khi tôi đặt chiều rộng của div con đến 50% khi tôi muốn nó có kích thước phù hợp
Tôi có đoạn mã sau. Khi nhấp vào nút trong div1, tôi cần ẩn div1 và hiển thị div2. (trong HTML5 góc). Tôi có một tệp JS với Bộ điều khiển, v.v. Hiện tại tôi có hai tệp khác nhau
Bây giờ tôi có thể tự động hóa div vùng chứa thành div bên trong hoặc tôi có thể căn giữa toàn bộ nội dung...nhưng tôi không biết cách thực hiện cả hai cùng một lúc. Dưới đây là CSS/bố cục tôi có. Bây giờ cả trang và các thành phần chính đều được căn giữa, nhưng nếu
Làm cách nào để căn chỉnh trên cùng hai div ô trong div bảng khi một div ô chứa div được định vị tuyệt đối? Trong ví dụ này, các div ô không chứa các div có vị trí tuyệt đối sẽ bị đẩy xuống. HTML: 1
Chương trình của tôi là một trò chơi, bắt đầu với 4 nhân vật Angular có thể chơi được, mỗi nhân vật Angular nằm trong lớp charContainer riêng, 4 div này nằm trong một thùng chứa nhân vật lớp. Khi người chơi vượt qua điểm
Tôi có điều gì đó như thế này: Hiện tại, không có định dạng nào trong #page. Nó hoạt động với một số nội dung, ý tôi là, khi nội dung lớn hơn, #page cũng có chiều cao cao hơn. Nhưng khi hôm nay tôi bôi #con vào đó
Tôi có ứng dụng React và tôi đang gặp phải một vấn đề lớn hơn một chút với một số CSS. Tôi có Chế độ xem được chia thành hai phần. Nhưng hai phần này nằm trong một tổ hợp lớn hơn. Phần bên trái hiển thị một số liên hệ và bên phải tôi muốn hiển thị
Tôi muốn giống như trang đăng ký Facebook, div1 (chiều rộng phần: 1024px) có bốn div, div2 bên trái (chiều rộng: 50%) có div3 (khẩu hiệu fb), div4 phía dưới (con
Tôi đang gặp sự cố trên trang web của mình khi chân trang trong trang chính không hiển thị chính xác cho một trang cụ thể. Trên trang đó, tôi có một cái ở phía dưới. Sau khi vò đầu bứt tai một lúc, tôi nhận ra rằng để phần chân trang hiển thị chính xác, tất cả những gì tôi cần làm là thay đổi dòng thành: Tôi không hiểu tại sao
Tôi đang sử dụng plugin này cho hình ảnh thang độ xám tương thích với nhiều trình duyệt. Về cơ bản, hình ảnh ban đầu ở chế độ thang độ xám với độ mờ thấp. Khi người dùng di chuột qua hình ảnh, thang độ xám dần chuyển sang màu, độ mờ trở về 1 và div bị ẩn trước đó sẽ di chuyển từ dưới lên
Đây là liên kết jsfiddle về vấn đề HTML 8.123456 của tôi huh-fjiuetie Các điều kiện là: h
Làm cách nào để ngăn div nội tuyến sau gói khi văn bản trong div trước đó tràn ra. Như bạn có thể thấy, đối với bài đăng đầu tiên, nội dung chính nằm ở dòng thứ hai, do đó các liên kết sau nó sẽ xuất hiện trên một dòng mới (điều này không chính xác). Nhưng đối với bài viết thứ 3, tiêu đề chính
Tôi có một div mà khi di chuột qua nó sẽ kích hoạt một div khác. Khi người dùng di chuyển chuột qua div được kích hoạt, tôi muốn div vẫn giữ nguyên. Đây là một đoạn trích. Khi bạn di chuột qua ô màu vàng, ô màu tím sẽ ẩn đi và ô màu xám sẽ xuất hiện. khi
Tôi là một lập trình viên xuất sắc, rất giỏi!