Question

我试图将图像中的箭头放到跨度的左侧。我使用空白跨度图像并为其分配背景图像。但是图像仍未显示。

＆＃13;

tscofig.json

＆＃13;

ul {
    margin: 0px 0px 0px 20px;
    padding: 0;
    list-style-type: none;
}

li {
	margin-bottom: 5px;
	margin-top: 5px;
}

.expand-icon
{
	width: 15px;
	vertical-align: middle;
	float: left;
	line-height: 1.5em;
	height: auto;
	background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png");
}

.edit-list-span {
	border: 1px solid #3465a4;
  padding: 2px 5px 2px 5px;
  background: #fff;
  line-height: 1.5em;
  display: block;
  overflow:hidden;
}

＆＃13;

<ul class="myUL"> <li class="edit-list"> <span class="expand-icon"></span> <span class="edit-list-span" contenteditable="true">Test Span</span> </li> </ul>是我试图放置图片但未显示的范围。请帮我解决这个问题。

Answer 1

您无法看到图片，因为它是- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { dispatch_semaphore_t sema = dispatch_semaphore_create(0); [PHPhotoLibrary requestAuthorization:^(PHAuthorizationStatus status) { if (status == PHAuthorizationStatusAuthorized) { dispatch_async(dispatch_get_global_queue(0, 0), ^{ [self getPhotos:^(NSArray *photos) { dispatch_semaphore_signal(sema); }]; }); } }]; dispatch_time_t timeout = dispatch_time(DISPATCH_TIME_NOW, (int64_t)(10 * NSEC_PER_SEC)); dispatch_semaphore_wait(sema, timeout); return YES; } - (void)getPhotos:(MyCallBack)callback { Class PHPhotoLibrary_class = NSClassFromString(@"PHPhotoLibrary"); if (PHPhotoLibrary_class) { PHFetchResult *smartAlbums = [PHAssetCollection fetchAssetCollectionsWithType:PHAssetCollectionTypeSmartAlbum subtype:PHAssetCollectionSubtypeSmartAlbumUserLibrary options:nil]; NSMutableArray *photos = [[NSMutableArray alloc] init]; int i = 0; for (PHAssetCollection *assetCollection in smartAlbums) { i++; PHFetchResult *smartAlbum = [PHAsset fetchAssetsInAssetCollection:assetCollection options:nil]; int j = 0; for (PHAsset *asset in smartAlbum) { j++; [[PHImageManager defaultManager] requestImageDataForAsset:asset options:nil resultHandler:^void(NSData * _Nullable imageData, NSString * _Nullable dataUTI, UIImageOrientation orientation, NSDictionary * _Nullable info) { [photos addObject:[UIImage imageWithData:imageData]]; if (i == [smartAlbums count] && j == [smartAlbum count]) { callback([NSArray arrayWithArray:photos]); } }]; if (i == [smartAlbums count] && j == [smartAlbum count]) { return; } } } } }并且周围有透明区域。您可以在范围中添加图像，而不是将其作为背景，并在128x128

更改图像的大小

我希望这会为你澄清

＆＃13;

.expand-icon img

＆＃13;

ul {
  margin: 0px 0px 0px 20px;
  padding: 0;
  list-style-type: none;
}

li {
	margin-bottom: 5px;
	margin-top: 5px;
}

.expand-icon
{
  vertical-align: middle;
  float: left;
  line-height: 1.5em;
  width: 1.5em;
  min-height: 1px;
}
.expand-icon img {
  width: 1.5em;
}

.edit-list-span {
  border: 1px solid #3465a4;
  padding: 2px 5px 2px 5px;
  background: #fff;
  line-height: 1.5em;
  display: block;
  overflow:hidden;
}

＆＃13;

Answer 2

一种方法是制作li display: flex;并将右span设置为flex-grow: 1或flex: 1 0 0;，然后修改背景属性，这样就可以了大小和位置。

ul {
    margin: 0px 0px 0px 20px;
    padding: 0;
    list-style-type: none;
}

li {
	margin-bottom: 5px;
	margin-top: 5px;
}

.edit-list {
  display: flex;
}

.expand-icon
{
	width: 15px;
	line-height: 1.5em;
	background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") 0 center no-repeat / 100%;
}

.edit-list-span {
	border: 1px solid #3465a4;
  padding: 2px 5px 2px 5px;
  background: #fff;
  line-height: 1.5em;
  overflow:hidden;
  flex: 1 0 0;
}

<ul class="myUL">
  <li class="edit-list">
    <span class="expand-icon"></span>
    <span class="edit-list-span" contenteditable="true">Test Span</span>
  </li>
</ul>

但是你不需要2个跨度。您可以将背景放在一个，或只放在li。

ul {
    margin: 0px 0px 0px 20px;
    padding: 0;
    list-style-type: none;
}

li {
	margin-bottom: 5px;
	margin-top: 5px;
}

.edit-list-span {
	border: 1px solid #3465a4;
  padding: 2px 5px 2px 5px;
  line-height: 1.5em;
  overflow:hidden;
  background: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png") 0 center no-repeat #fff / 20px 20px;
  display: block;
  padding-left: 20px;
}

<ul class="myUL">
  <li class="edit-list">
    <span class="edit-list-span" contenteditable="true">Test Span</span>
  </li>
</ul>

背景与图像不工作空白跨度

2 个答案: