Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

html - Xoay breadcrumb theo chiều ngang, chiều dọc

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 04:17:30 30 4
mua khóa gpt4 Nike

Có thể đó là một vấn đề nhưng đòi hỏi quá nhiều nhưng tôi đã đạt đến giới hạn của mình.

Tôi có cái này ( http://jsfiddle.net/3whTa/) CSS, tạo ra một mũi tên điều hướng đường dẫn theo chiều ngang.

Những gì tôi muốn làm là chuyển đổi nó thành chiều dọc. Giống như các mũi tên hướng vào nhau nhưng văn bản vẫn nằm ngang (và sau đó phải thay đổi kích thước).

Làm thế nào điều này có thể xảy ra? Ngoài ra, tôi đã thử tìm kiếm xung quanh để tìm điều hướng như thế này nhưng tôi chưa tìm thấy gì cả, vì vậy, một con trỏ đi đúng hướng cũng sẽ hữu ích không kém.

Bạn có thể thấy nó hoạt động với mã trong jsfiddle được liên kết ở trên, nhưng tôi cũng sẽ dán nó vào đây:

HTML


CSS

#breadcrumbs-hai{
  tràn: ẩn;
  width: 100%;
  margin: 0;
  padding: 0;
  kiểu danh sách: không có;
}

#breadcrumbs-twoli{
  nổi: trái;
  lề: 0 .5em 0 1em;
}

#breadcrumbs-hai a{
  nền: #ddd;
  phần đệm: .7em 1em;
  nổi: trái;
  trang trí văn bản: không có;
  màu sắc: #444;
  bóng văn bản: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-two a:hover{
  nền: #99db76;
}

#breadcrumbs-two a::trước{
  nội dung: "";
  position: absolute;
  trên cùng: 50%; 
  lề trên: -1,5em;   
  chiều rộng đường viền: 1,5em 0 1,5em 1em;
  kiểu viền: liền khối;
  màu viền: #ddd #ddd #ddd trong suốt;
  trái: -1em;
}

#breadcrumbs-two a:hover::trước{
  màu viền: #99db76 #99db76 #99db76 trong suốt;
}

#breadcrumbs-two a::after{
  nội dung: "";
  position: absolute;
  trên cùng: 50%; 
  lề trên: -1,5em;   
  viền trên: 1,5em trong suốt;
  viền-đáy: 1,5em trong suốt;
  viền-trái: 1em rắn #ddd;
  đúng: -1em;
}

#breadcrumbs-two a:hover::after{
  viền-trái-màu: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
    độ dày phông chữ: đậm;
    nền: #99db76;
}

#breadcrumbs-two .current::after{
    viền-trái-màu: #99db76;
}
#breadcrumbs-two .current::trước{
    màu viền: #99db76 #99db76 #99db76 trong suốt;
}

câu trả lời hay nhất

Hoặc CSS này:

ul
{
đệm-trái: 0;
width:100px;
}

ulli
{
display:block;
chiều cao:30px;
lề dưới: 8px;
vị trí: tương đối;
nền:màu xám;
}

ulli: trước đây
{
nội dung:'';
trên cùng:-1px;
trái:10px;
đường viền:1px màu xanh đậm;
chiều rộng đường viền: 4px 40px 20px 40px;
màu viền: trắng trong suốt trong suốt;
vị trí: tuyệt đối;
}

ul li:con đầu:trước
{
đường viền: không có;
}

ulli:sau
{
nội dung:'';
dưới cùng:-26px;
trái:10px;
đường viền:1px màu xanh đậm;
chiều rộng đường viền:6px 40px 20px 40px;
màu viền: đỏ trong suốt trong suốt;
vị trí: tuyệt đối;
}

ul li:con út:sau
{
đường viền: không có;
}

Đối với các mũi tên rất đơn giản nhỏ hơn Angular thẳng. Nhưng IMHO nó trông không đẹp. Cách tiếp cận tốt hơn là sử dụng một mũi tên Góc thẳng nhỏ và đặt nó vào giữa khối. Đặc biệt nếu bạn cần nhiều hơn chỉ một từ dưới dạng văn bản.

Về html - xoay mẩu bánh mì theo chiều ngang, chiều dọc, 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/19683182/

30 4 0
Bài viết khuyến nghị: cơ sở dữ liệu - Mở tệp MS Access trong Linux
Bài viết khuyến nghị: Bạn có thể chỉ định phương sai trong chú thích kiểu Python không?
Bài viết khuyến nghị: css - di chuột một div phía sau một div khác
Bài viết khuyến nghị: css - Giá trị thuộc tính CSS không hợp lệ cho nền có hình ảnh và độ dốc mở rộng
không gian vũ trụ
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress