首頁(yè) 猿問(wèn) CSS 放置，圖例旁邊的圖像

CSS 放置，圖例旁邊的圖像

Html5

寶慕林4294392 2023-09-18 10:39:44

您好，我目前正在嘗試在我的一張圖像旁邊放置圖例，但在放置時(shí)遇到問(wèn)題。我想將圖例放在圖像的左側(cè)或右側(cè)。這是我當(dāng)前的代碼：.my-legend .legend-title { text-align: left; margin-bottom: 5px; font-weight: bold; font-size: 90%;}.my-legend .legend-scale ul { margin: 0; margin-bottom: 5px; padding: 0; float: left; list-style: none;}.my-legend .legend-scale ul li { font-size: 80%; list-style: none; margin-left: 0; line-height: 35px; margin-bottom: 2px;}.my-legend ul.legend-labels li span { display: block; float: left; height: 26px; width: 40px; margin-right: 15px; margin-left: 0; border: 1px solid #999;}.my-legend .legend-source { font-size: 70%; color: #999; clear: both;}.my-legend a { color: #777;}<img src="images/homeview.png" height="500"><p><i>*Color coded home view example</i></p><hr><div class='my-legend'> <div class='legend-scale'> <ul class='legend-labels'> <li><span style='background:#F7F7F7;'></span>Available</li> <li><span style='background:#FFA500;'></span>Parked & Loaded</li> <li><span style='background:#2E8B57;'></span>Parked & Unloaded</li> <li><span style='background:#41B1E1;'></span>Docked</li> </ul> </div>

查看完整描述

2 回答

HUX布斯

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超6個(gè)贊

根據(jù)我的評(píng)論，以下是一些可以使用的方法：

浮動(dòng)第一個(gè)的基本示例img （顯然您嘗試過(guò)。它需要 amin-width來(lái)避免換行）：

.my-legend .legend-title {

text-align: left;

margin-bottom: 5px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

margin-bottom: 5px;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

font-size: 80%;

list-style: none;

margin-left: 0;

line-height: 35px;

margin-bottom: 2px;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 26px;

width: 40px;

margin-right: 15px;

margin-left: 0;

border: 1px solid #999;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

img {float:left;}

body {min-width:600px;

<p><i>*Color coded home view example</i></p>

<hr>

<li><span style='background:#F7F7F7;'></span>Available</li>

<li><span style='background:#FFA500;'></span>Parked & Loaded</li>

<li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>

<li><span style='background:#41B1E1;'></span>Docked</li>

</ul>

</div>

包裝器并display:table-cell允許vertical-alignment （對(duì)于較舊的瀏覽器）

.my-legend .legend-title {

text-align: left;

margin-bottom: 5px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

margin-bottom: 5px;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

font-size: 80%;

list-style: none;

margin-left: 0;

line-height: 35px;

margin-bottom: 2px;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 26px;

width: 40px;

margin-right: 15px;

margin-left: 0;

border: 1px solid #999;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

.table-cell {

display: table-cell;

/* avalaible option */

vertical-align: middle;

}

<p><i>*Color coded home view example</i></p>

<hr>

<li><span style='background:#F7F7F7;'></span>Available</li>

<li><span style='background:#FFA500;'></span>Parked & Loaded</li>

<li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>

<li><span style='background:#41B1E1;'></span>Docked</li>

</ul>

</div>

包裝器和flex （對(duì)于部分布局）：

.my-legend .legend-title {

text-align: left;

margin-bottom: 5px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

margin-bottom: 5px;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

font-size: 80%;

list-style: none;

margin-left: 0;

line-height: 35px;

margin-bottom: 2px;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 26px;

width: 40px;

margin-right: 15px;

margin-left: 0;

border: 1px solid #999;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

.flex-parent{

display:flex;

/* avalaible option */

align-items:center;

/* also : justify-content: center or else */

}

<p><i>*Color coded home view example</i></p>

<hr>

<li><span style='background:#F7F7F7;'></span>Available</li>

<li><span style='background:#FFA500;'></span>Parked & Loaded</li>

<li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>

<li><span style='background:#41B1E1;'></span>Docked</li>

</ul>

</div>

包裝器grid （對(duì)于主布局有用）

.my-legend .legend-title {

text-align: left;

margin-bottom: 5px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

margin-bottom: 5px;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

font-size: 80%;

list-style: none;

margin-left: 0;

line-height: 35px;

margin-bottom: 2px;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 26px;

width: 40px;

margin-right: 15px;

margin-left: 0;

border: 1px solid #999;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

.grid-parent{

display:grid;

grid-template-columns: repeat(2,auto);

/* avalaible option */

align-items:center;

/* also : justify-content: center or else */

}

<p><i>*Color coded home view example</i></p>

<hr>

<li><span style='background:#F7F7F7;'></span>Available</li>

<li><span style='background:#FFA500;'></span>Parked & Loaded</li>

<li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>

<li><span style='background:#41B1E1;'></span>Docked</li>

</ul>

</div>

inline-block或position也可以工作，但為此目的很棘手，但不是為此目的而設(shè)計(jì)的。

extra , html5 自帶了figure和figcaption，這似乎是典型的用法

text that belongs to theImg

</figcaption>

</figure>

反對(duì) 回復(fù) 2023-09-18

PIPIONE

TA貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超9個(gè)贊

這夠了嗎？

.my-legend .legend-title {

text-align: left;

margin-bottom: 5px;

font-weight: bold;

font-size: 90%;

}

.my-legend .legend-scale ul {

margin: 0;

margin-bottom: 5px;

padding: 0;

float: left;

list-style: none;

}

.my-legend .legend-scale ul li {

font-size: 80%;

list-style: none;

margin-left: 0;

line-height: 35px;

margin-bottom: 2px;

}

.my-legend ul.legend-labels li span {

display: block;

float: left;

height: 26px;

width: 40px;

margin-right: 15px;

margin-left: 0;

border: 1px solid #999;

}

.my-legend .legend-source {

font-size: 70%;

color: #999;

clear: both;

}

.my-legend a {

color: #777;

}

.container {

display: flex;

}

<div>

<p><i>*Color coded home view example</i></p>

<hr>

<li><span style='background:#F7F7F7;'></span>Available</li>

<li><span style='background:#FFA500;'></span>Parked & Loaded</li>

<li><span style='background:#2E8B57;'></span>Parked & Unloaded</li>

<li><span style='background:#41B1E1;'></span>Docked</li>

</ul>

</div>

反對(duì) 回復(fù) 2023-09-18

2 回答
0 關(guān)注
125 瀏覽

關(guān)注

添加回答

舉報(bào)

0/150

提交

取消

使用 Ctrl+D 可將網(wǎng)站添加到書簽

微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

CSS 放置，圖例旁邊的圖像

CSS 放置，圖例旁邊的圖像

2 回答

添加回答