主页 / user-264178

Dev18's questions

Martin Hope
Dev18
Asked: 2024-10-23 23:53:33 +0000 UTC
  • 6

在 GitHub Blazor Server上测试应用程序，我将OpenStreetMap与Leaflet集成以显示两个坐标之间的地图和路线。

我希望地图和路线说明以所选语言显示（例如，用于法语测试），但我遇到了问题：

界面问题截图

尽管使用了法语图块，但界面的某些部分（右侧的路线）仍然是英语，并且街道采用了所需的语言。

也就是说，地图已显示，但一些标签和路线说明仍为英文，尽管我使用“法语” OpenStreetMap osmfr瓷砖。

https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png

我听说过使用Mapbox或MapTiles等翻译服务的解决方案，但我还没有尝试过。

我尝试accept-language=fr向Nominatim API请求添加一个参数来获取地址：

string url = $"https://nominatim.openstreetmap.org/search?format=json&q={encodedAddress}&accept-language=fr";

但这并没有改变任何事情。

我还尝试使用所需的脚本实现第三方 API，但也没有帮助。

LeafletMap.js:

// LeafletMap.js

export function initializeLeafletMap(startCoordinates, endCoordinates) {
    var map = L.map('map').setView(startCoordinates, 13);

    L.tileLayer('https://{s}.tile.openstreetmap.fr/osmfr/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.fr/copyright">OpenStreetMap</a>'
    }).addTo(map);

    L.Routing.control({
        waypoints: [
            L.latLng(startCoordinates),
            L.latLng(endCoordinates)
        ],
        routeWhileDragging: true
    }).addTo(map);
}

LeafletMap.razor:

@rendermode InteractiveServer

@inject HttpClient httpClient
@using Microsoft.JSInterop
@inject IJSRuntime JsRuntimeMap

<div id="map"></div>

@code {
    #region property
    public double[] StartCoordinates { get; set; }
    public double[] EndCoordinates { get; set; }
    [Parameter] public string StartCoordinatesAdresse { get; set; }
    [Parameter] public string EndCoordinatesAdresse { get; set; }

    private IJSObjectReference _jsModule;
    #endregion

    protected override async Task OnInitializedAsync()
    {
        httpClient = new HttpClient();
        httpClient.DefaultRequestHeaders.UserAgent.ParseAdd("TestLeaflet"); //your projectName
    }
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            try
            {
                _jsModule = await JsRuntimeMap.InvokeAsync<IJSObjectReference>("import", "/js/LeafletMap.js");
                StartCoordinates = await GetCoordinatesFromAddress(StartCoordinatesAdresse);
                EndCoordinates = await GetCoordinatesFromAddress(EndCoordinatesAdresse);
                if (StartCoordinates != null && EndCoordinates != null)
                {
                    await _jsModule.InvokeVoidAsync("initializeLeafletMap", StartCoordinates, EndCoordinates);
                }
            }
            catch (Exception ex)
            {
                // Log.WriteLogException(ex);
            }
        }
    }

    private async Task<double[]> GetCoordinatesFromAddress(string address)
    {
        try
        {
            string encodedAddress = Uri.EscapeDataString(address);
            string url = $"https://nominatim.openstreetmap.org/search?format=json&q={encodedAddress}&accept-language=fr";

            var response = await httpClient.GetFromJsonAsync<NominatimResponse[]>(url);

            if (response != null && response.Length > 0)
            {
                return new double[] { response[0].lat, response[0].lon };
            }
        }
        catch (Exception ex)
        {
            // Log.WriteLogException(ex);
        }
        return null;
    }

    public class NominatimResponse
    {
        public double lat { get; set; }
        public double lon { get; set; }
    }

    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

问题：

如何翻译显示路线的右侧？

карты
Martin Hope
Dev18
Asked: 2024-09-19 21:06:23 +0000 UTC
  • 5

问题：我们只需要从DateTime组件中的对象中提取时间Syncfusion SfTimePicker，避免由于最小日期而导致的错误（该组件仅支持从 2001 年开始的日期）。

细节：

  • 我正在使用SfTimePicker(Blazor) 显示DateTime.只有时间部分很重要，日期并不重要。
  • 如果对象的日期早于 2001 年，则该组件将以红色突出显示。
  • 我尝试使用 来改变日期.AddYears(2000)，这有效，但我不确定这种方法的正确性

问题：

如何显示日期，以便没有错误，并且不添加代码（.AddYears(2000)），我可能会忘记，然后它可能会产生意外的结果（？）或者这是转换的实践方式？

在此输入图像描述

@page "/timePicker"

@using Syncfusion.Blazor.Calendars


<SfTimePicker TValue="DateTime" @bind-Value="@TimeValue"></SfTimePicker>
<p>TimeValue ===> @TimeValue</p>

<SfTimePicker TValue="DateTime" @bind-Value="@TimeValue2"></SfTimePicker>
<p>TimeValue2 ===> @TimeValue2</p>

@code {
    public DateTime TimeValue { get; set; } = DateTime.MinValue.AddYears(2000);
    public DateTime TimeValue2 { get; set; } = DateTime.MinValue;
}

我还尝试将对象带到最小日期C#（即01/01/0001），但结果也以红色突出显示

var hour = DateTime.Now;
@if (Data.MyProperty != null)
{
    hour = new DateTime(1, 1, 1, Data.MyProperty.Hour, Data.MyProperty.Minute, 0);
}

我也尝试使用TimeSpan，它删除了红色突出显示，但该组件停止工作......

 TimeSpan planningTime = Data.MyProperty.TimeOfDay;
 <Syncfusion.Blazor.Calendars.SfTimePicker TValue="TimeSpan" 
                                           @bind-Value="@planningTime">
 </Syncfusion.Blazor.Calendars.SfTimePicker>

我也尝试过使用TimeOnly

TimeOnly planningTime = TimeOnly.FromDateTime(Data.MyProperty);                                                
<Syncfusion.Blazor.Calendars.SfTimePicker TValue="TimeOnly" @bind-Value="@planningTime">   
                                          
</Syncfusion.Blazor.Calendars.SfTimePicker>
c#
Martin Hope
Dev18
Asked: 2024-07-30 21:34:47 +0000 UTC
  • 5

任务：根据 API 请求更新所有打开会话中的页面。当 API 发送请求时，两个会话都必须更新。例如，如果 Alice 和 Bob 打开页面，则两个页面都应该更新。

问题：目前，如果您打开第二个会话并且它离开页面 X，则第一个会话将失去其订阅并且不再接收更新。

状况：

  1. 第一个 Web 应用程序是在 Blazor Server 中编写的。
  2. 第二个是一个简单的 API 挂钩。

如何确保两个会话保持签名并接收更新，而不管用户在另一个会话中的操作如何？

挂钩API

public static readonly ConcurrentDictionary<string, string> Subscribers = new();

[HttpPost("subscribe")]
public IActionResult Subscribe([FromBody] SubscriptionRequest request)
{
    Subscribers[request.Url] = request.Url;
    return Ok(new { status = "subscribed" });
}

[HttpPost("unsubscribe")]
public IActionResult Unsubscribe([FromBody] SubscriptionRequest request)
{
    Subscribers.TryRemove(request.Url, out _);
    return Ok(new { status = "unsubscribed" });
}

private async Task<IActionResult> SendWebhookToSubscribers(IEnumerable<SimpleDataForHookTest> payload)
{
    var client = _httpClientFactory.CreateClient();
    foreach (var subscriber in Subscribers.Values)
    {
        await client.PostAsJsonAsync(subscriber, payload);
    }
    return Ok(new { status = "webhook sent" });
}

布拉佐尔

protected override async Task OnInitializedAsync()
{
    await SubscriptionService.Subscribe("https://localhost:7052/api/TestHook/TestWebHook");
    HookService.Register(ReceivePlanningData);
}

private void ReceivePlanningData(IEnumerable<SimpleDataForHookTest> planningListDto)
{
    MyPropertyTestHook = planningListDto;
    InvokeAsync(StateHasChanged);
}

public void Dispose()
{
    HookService.UnRegister(ReceivePlanningData);
    SubscriptionService.Unsubscribe("https://localhost:7052/api/TestHook/TestWebHook").GetAwaiter().GetResult();
}

完整的代码位于 GitHub 上（这里我分享了控制器和 Razor 页面的主要代码）。如果您运行这两个应用程序，则 15 秒后页面 1 会更新，但如果您并行打开页面 2 并保留它，则第一个页面将不再更新。

我试过：

a) Blazor 端的计时器每 n 分钟发出 GET 请求。这是昂贵的并且会在用户工作时破坏页面。

b) SignalR，虽然订阅成功了，但没有起作用，也不刷新页面。在 main 上有一个带有 SignalR 的版本，我无法修改它。

GitHub 上的工作分支：

（我通常使用Azure DevOps，我不知道是否需要在GitHub上创建拉取请求，或者我是否可以克隆。我通过Visual Studio创建了一个新分支并提交了它，但我找不到该选项在 GitHub 上创建拉取请求）。

也许有人有自己的想法，可以告诉我如何从 API 更新数据。数据如何到达 API 并不重要，但 API 将数据发送给订阅者（在此示例中为 Blazor Web）。

c#
Martin Hope
Dev18
Asked: 2024-02-22 21:44:27 +0000 UTC
  • 5

有一个sql数据库以格式存储颜色，int例如信封后面的15620996，即使在计算器的帮助下，它也是粉红色的......

为了使用这个数字作为颜色，我以各种方式转换它

我在这里找到了这个功能

    DECLARE @digit char(1)
    SET @seq = '0123456789ABCDEF'

    SET @result = SUBSTRING(@seq, (@value%16)+1, 1)

    WHILE @value > 0
    BEGIN
        SET @digit = SUBSTRING(@seq, ((@value/16)%16)+1, 1)

        SET @value = @value/16
        IF @value <> 0 SET @result = @digit + @result
    END 

    RETURN @result
END
GO

SELECT dbo.ToHex(15620996)  ---> EE5B84 => что равно розовый

程序本身也是如此

,(SELECT '#' + FORMAT(MyColorFromDB, 'X')  FROM MyTable WHERE someCondition) AS ColorTaskHex

这返回了粉红色，但问题是在从数据库中获取此颜色的程序中它是紫色的，该程序是用WinDev编写的，当我获取它并picker用标记突出显示程序中的颜色时，它给了我rgb(132, 91, 238)=> ，然后我在WinDev84, 5B, EE中输入并收到15620996，也就是说，保存数据是正确的，我们保存了Violet，但是我们如何从中取回十六进制或rgb格式的正常颜色（从rvb（？ ）） ？ rvb(132,91,238)int

我在文档本身中阅读了它，但我不明白如何创建“反向”算法。

我没有找到标签WinDev，也许很少有人使用过这个，但也许有想法可以在哪里挖掘？

我现在看到 84、5B、EE（程序中的紫色）和 EE5B84（粉色，我通过转换从 int 得到的），好像它改变了第一个和最后一个值？或者巧合...

sql
Martin Hope
Dev18
Asked: 2024-01-15 21:44:00 +0000 UTC
  • 5
  • Blazor 服务器端

oninput我在 my 中使用该事件input，并在标签中显示计算 +/-

在此输入图像描述

30-28.5 = 1.5，但输出 2（不考虑句点/逗号后面的内容）

我尝试使用onfocusout（我想，也许当我走出现场时，它会完全重新计算）相同的结果

<input step="any" min="0" type="number" @[email protected]
       onclick="this.select();" @oninput="@((args)=>InputBind(args, myDataObject))"
       class="someCss" />

<label style="visibility:@someVisibility;">
    (@string.Format(CultureInfo.InvariantCulture, "{0:F3}", @ValueUpdate))
</label>

float ValueUpdate;
public void InputBind(Microsoft.AspNetCore.Components.ChangeEventArgs args, MyModel model)
{
    float intOut;
    if (float.TryParse(args.Value.ToString(), out intOut))
    {
        ValueUpdate = intOut;
    }

    ValueUpdate = ValueUpdate - model.ValueBase; // model.ValueBase type float
}

也许我的字符串格式不正确？或者也许输出在输出时是一个字符串，它应该返回到一个浮点数，或者也许根本不可能做这样的所有事情？

javascript
Martin Hope
Dev18
Asked: 2024-01-03 23:36:29 +0000 UTC
  • 5
  • 微软Sql管理工作室

您需要按页面查看用户的权限（Kolya是否有权查看其中一个页面或同时查看所有页面（第1页，第2页，第3页，第4页，第5页））显示允许的页面列表

我决定创建一个我知道并手动输入的可能页面的 id 列表，然后从“用户权限”表中查找用户 id 和页面 id（如果有数据要显示）（例如，写入“是”和“否”）在表中，我从列表中查找与 Kolya 和第 x 页相关的所有带“是”的行）

procedure sql

ALTER PROCEDURE GetUserPageAcces
    -
@UserId int
AS
BEGIN

    -- SET NOCOUNT ON added to prevent extra result sets from
    -- interfering with SELECT statements.
    SET NOCOUNT ON;

    DECLARE @ListPage table (IdPage int, PageName vacrchar(max))
    INSERT INTO @ListPage VALUES (1, 'page1'), (2, 'page2'), (3, 'page3'), (4, 'page4'), (5, 'page5')
    
    -- Insert statements for procedure here
    SELECT SomePropertyAcces AS Access FROM MyTableWithUser
    WHERE UserId = @UserId AND PageId IN (select Id from @ListPage) AND SomePropertyAcces = 'YES'
    --return @ListPage

на выходе

    Access   
    YES
    YES

我怎样才能从这张表中返回数据？ListPage

чтоб на выходе было =>

    Access   PageName 
    YES      page2
    YES      page3

我尝试加入，然后尝试创建一个 #into 表，但我做不到，也许他们根本不这样做？

我可以显示 Id（取自 MyTableWithUser 表），但我需要的正是页面标题 => page1，而不是 1

sql
Martin Hope
Dev18
Asked: 2023-12-14 17:13:02 +0000 UTC
  • 6
// эти две даты привязаны к календарю, 
// по умолчанию сегодня, а потом позже, они берут значение, что выбрал пользователь
// и меняются, все работает и когда меняются значение присваивается
public DateTime? MinDate { get; set; } = DateTime.Now;
public DateTime? MaxDate { get; set; } = DateTime.Now;

// вот таким образом
public async Task ValueChangeHandlerAsync(RangePickerEventArgs<DateTime?> args)
{
    if ((args.Date1 != null) && (args.Date2 != null))
    {
        MinDate = args.Date1;
        MaxDate = args.Date2;
    }
    //And when user UNfocused, i call some function with TWO dates value set
    if ((MinDate != null) & (MaxDate != null))
    {
      // тут я отправляю в LocalStorage две даты, ниже код, заходит сюда, только если обе даты // инитциализированны
    }
}

我在 LocalStorage 中保存两个日期并收到错误

The JSON value could not be converted to System.DateTime. Path: $ | LineNumber: 0 | BytePositionInLine: 4.

我尝试转换，我在开放空间找到了一个例子🔽

DateTime UpdatedTime1 = MinDate ?? DateTime.Now;
DateTime UpdatedTime2 = MaxDate ?? DateTime.Now;

LocalStorageServices.SetSessionDate("date1", UpdatedTime1);
LocalStorageServices.SetSessionDate("date2", UpdatedTime2);

仍然是错误，我也尝试立即DateTime?发送

Null object cannot be converted to a value type.

这是发送方法，我试了DateTime一下DateTime?

public async void SetSessionDate(string title, DateTime? valeur)
{
    try
    {
        await WaitForReference();
        await _accessorJsRef.Value.InvokeAsync<DateTime?>("set", title, valeur);
    }
    catch (Exception ex)
    {
        Log.WriteLine($"SetSessionDate({title}, {valeur}) : " + ex.Message);
    }
}

这js

export function set(key, value) {
    window.localStorage.setItem(key, value);
}

我也用过（只是直观，但是没有这个功能，出现错误）

export function setDate(key, value) {
    window.localStorage.setDate(key, value);
}

必要：在LocalStorage中保存两个日期

  • 结果，日期被保存了，但它们总是陷入catch（也许这就是常态？）
javascript
Martin Hope
Dev18
Asked: 2023-11-23 23:07:23 +0000 UTC
  • 5

您需要创建两个日期，并考虑工作日。假设六个工作日。

今天和昨天，但如果昨天是星期日，则星期六（昨天的工作日）

我创建了一个请求：

DECLARE @DATESTART DATETIME = CAST(GETDATE() AS DATE)
IF DATEPART(WEEKDAY, @DATESTART) = 7 --ЕСЛИ ВОСКРЕСЕНЬЕ
BEGIN
SET @DATESTART = @DATESTART - 1
END
DECLARE @DATEEND DATETIME = @DATESTART - 1
IF DATEPART(WEEKDAY, @DATEEND) = 7 --ЕСЛИ ВОСКРЕСЕНЬЕ
BEGIN
SET @DATEEND = @DATEEND - 1
END

SELECT @DATESTART AS D1, @DATEEND AS D2

结果：

结果

我使用日期的过程不返回任何内容。当我手动写入日期时('23/11/2023' и '22/11/2023')，它起作用了。我是否正确创建了请求？

我自己根据文档写了请求，据我了解，七是周日索引。

sql
Martin Hope
Dev18
Asked: 2023-10-31 22:24:17 +0000 UTC
  • 6

需要通过键盘点击 AND 来实现按下 AND 按钮后的动作。我归因于两个OnCliCk()事件KeyDown(KeyboardEventArgs e)

如果用户按 Enter 键，则 Onclick 也会触发，然后重复执行，原本计划执行一次。我该如何执行这个任务？为什么OnClick会起作用，因为我不是点击鼠标，而是按键盘上的Enter键。我尝试删除 Onclick，但用户仅限于键盘。我怎样才能实现两个事件，以便某些操作只能起作用一次并且不会重复。

在此输入图像描述

如果用户按下键盘= Enter，则触发OnKeyDown，如果使用鼠标，则触发OnClick

@page "/"

@inject IJSRuntime JsRuntime

@{
    <p>какой то текст</p>
    <button>кнопка точка отступа, чтоб табуляцию переключить</button>
    <button @onkeydown="@((e)=>KeyDown(e))"
    @onclick="@(()=>OnCliCk())">Test event with keyboard</button>
}

@code{
    public async void KeyDown(KeyboardEventArgs e)
    {
        if (e.Code == "Enter" || e.Code == "NumpadEnter")
        {
            await JsRuntime.InvokeVoidAsync("alert", "KeyDown!");
        }
    }
    public async void OnCliCk()
    {
        await JsRuntime.InvokeVoidAsync("alert", "OnClick!");
    }
}

这是 GitHub 上的一个示例，我使用 Blazor 作为示例，我没有放置 Blazor 标签，因为这是一个关于事件序列逻辑的一般问题。

当然有一种方法可以使用这两种操作来方便用户使用按钮，但我在文档中没有找到它。告诉我，谁已经这样做了，你是如何解决这个问题的？如果有文档链接，那么也谢谢

用简单的语言来说（如果在这个例子中），我需要模态窗口一次，而不是像演示的第二种情况那样两次

c#
Martin Hope
Dev18
Asked: 2023-05-29 20:27:03 +0000 UTC
  • 5

我需要将数据分配给两个变量Property1 & Property2

总计在CountTotal

取决于 if ValPerson= 1 | 0

如果 1 = 则总数转到 property1 如果 0 则总数转到 property2

（不知道为什么只有1和0，int，但是他们给我解释了，我没看懂，我看到我接受了int，但是好像是boolean值，可能是我给错类型了，我只是写了int，或者可能还有另一种方式bool如何报错，也就是说，我写在bool模型中，编译器诅咒但没有显示数据，我只是写信封无法让我的杰森，也许我不知道什么类型的 boolInt(?)...) 类型，但在数据库中有一个或零（但这是关于数据库兼容性的单独问题）

public class Weighs
{
    public int ValPerson { get; set; }
    public int CountTotal { get; set; }

    public int Property1 { get => @CalculForProperty1(ValPerson, CountTotal); }
    public int Property2 { get => @CalculForProperty2(ValPerson, CountTotal); }

    public int CalculForProperty1(int who, int nbCalcul1)
    {
        if (who != 0)
        {
            return nbCalcul1;
        }
        else
        {
            return 0;
        }
    }

    public int CalculForProperty2(int who, int nbCalcul2)
    {
        if (who == 0)
        {
            return nbCalcul2;
        }
        else
        {
            return 0;
        }
    }
}

@aepot 我从零开始更正

据我了解，我做到了，帮助更正这个计算，还是我数对了？

并加上两个方法，如何简化它

c#
Martin Hope
Dev18
Asked: 2023-05-21 01:08:58 +0000 UTC
  • 5

如何检查端口是否正常工作hdmi？需要某种测试吗？为什么端口每隔一段时间响应一次。...总的来说，突然停止响应并且很少使用。

如果端口仍然恶化，我应该买什么，比如适配器？在 Internet 上，他们写道它包括两个显示器，但实际上他们出售一个开关，我应该看什么参数，hdmi 是否有双？

需要添加第二个屏幕

экран
Martin Hope
Dev18
Asked: 2023-05-05 15:43:46 +0000 UTC
  • 5
<p style="visibility:hidden" class="someStyle">blablabla</p>
<!--это по синтаксису написания-->

<p style="visibility:@visibleProperty" class="someStyle">blablabla</p>
<!--ну а это, чтоб понятней логика была, эту переменную я определяю в зависимости от необходимости-->

html тег同时添加样式和类是否正确？

我添加了，它有效，但我找不到是否可以使用这样的标签的示例

html
Martin Hope
Dev18
Asked: 2022-04-23 22:38:47 +0000 UTC
  • 0

按照课堂上的文档，我Startup确定了“秘密”和“身份”

       {
          ClientId = "Client ID for Web application => аккаунт гугл с настройками приложения", 
          ClientSecret = "Client secret => там же секрет"
          // так тоже проверила, хотя она задается по умолчанию CallbackPath = new PathString("/signin-google")      
        });

谷歌帐户 谷歌账户设置

尝试通过 Google 进行身份验证时，它不会重定向到任何地方

（三天前我重定向到谷歌页面，输入账号密码后返回/Account页面，然后在Windows11上重新安装系统，现在在/Account页面上只是滞后并且无声...）

我开始调试，我停在页面加载......即，在loginInfo == null

        {
            // Обработка результата от поставщика проверки подлинности в запросе
            ProviderName = IdentityHelper.GetProviderNameFromRequest(Request);
            if (String.IsNullOrEmpty(ProviderName))
            {
                RedirectOnFail();
                return;
            }
            if (!IsPostBack)
            {
                var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();
                var signInManager = Context.GetOwinContext().Get<ApplicationSignInManager>();
                var loginInfo = Context.GetOwinContext().Authentication.GetExternalLoginInfo();
                if (loginInfo == null)
                {
//Входит в этот if при отладке  
                    RedirectOnFail();
                    return;
                }
............

如果它是 localhost，那么为什么在本文档的示例中我没有看到任何关于它的信息

本地主机谷歌

c#
Martin Hope
Dev18
Asked: 2022-02-25 00:46:51 +0000 UTC
  • 0

这些调用的顺序是什么

/*див, затем еще див и на том же уровне список (который меняет дисплей на блок если,,,) 
потом плюс див див див, который ховер (справа условия?)*/

.div.demo-list-hide div ul.hide-list+div.list-item div div.icon:hover {
  display: block;
}

.hide-list {
  display: none;
}

.icon:hover {
  background-color: green;
}
<div class="demo-list-hide">
  <div class="list-item">
    <div class="header-list-items">
      текст и подсписок
    </div>
    <div class="icon">
      иконка
    </div>
  </div>
  <ul class="hide-list">
    <li>a</li>
    <li>b</li>
    <li>c</li>
  </ul>
</div>

如何使用某些条件访问元素，“如果按下按钮 - 内容发生变化”

.list div.under-list-visible ul {
  display: none;
}

.list div.under-list-visible>input:checked+label+ul {
  display: block;
  margin-left: 2em;
}

ul {
  list-style: none;
}

.span-under-list2 {
  position: relative;
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(45deg);
  margin-right: 0.5em;
}


/* тут я пытаюсь обратиться к стрелке, чтобы изменить её направление, 
мне надо будет её повернуть, чтобы она смотрела вниз, 
в качестве теста я просто меняю ее цвет, 
но видимо порядок обращения к элементам нарушен, не понимаю как это работает */

.list div.under-list-visible>input:checked+label+ul+.span-under-list2 {
  border-right: 0.2em solid red;
  border-top: 0.2em solid red;
}
<ul class="list">
  <li>
    <div class="under-list-visible">
      <input type="checkbox" id="under-list2" style="display:none;" />

      <label for="under-list2">
    <span class="span-under-list2"></span>
     1 (подсписок)</label>

      <ul class="hide-list">
        <li>а</li>
        <li>б</li>
        <li>в</li>
      </ul>
    </div>
  </li>
</ul>

html
Martin Hope
Dev18
Asked: 2022-02-24 00:41:16 +0000 UTC
  • 0

像隐藏块，点击显示？我使用属性规则active ，<a> 但它显示列表，只有在延迟时，但我需要点击出现，第二次点击消失。

// 使用js不合适，我正在通过css寻找解决方案

.dropdown {
  visibility: hidden;
  display: none;
}

ul li:active>ul,
ul li ul:active {
  visibility: visible;
  display: block;
}
<ul>
  <li><a>1</a></li>
  <li><a>2</a></li>
  <li><a>3</a></li>
  <li>
    <a>4(доп список)</a>
    <ul class="dropdown">
      <li>а</li>
      <li>б</li>
      <li>в</li>
    </ul>
  </li>
  <li><a>5</a></li>
  <li><a>6</a></li>
</ul>

html
Martin Hope
Dev18
Asked: 2022-02-15 18:53:50 +0000 UTC
  • 0

.nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav-item {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
}

.setting {
  align-self: flex-end;
  color: red;
}
<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link setting">
        внизу прикреплен
      </div>
    </li>
  </ul>
</div>

flex 看这里我试图降低页面列表的第 4 个元素，还有一个示例，我尝试了在提出问题时在网站上弹出的其他示例，但由于某种原因，最后一个元素遵循三个背靠背？

以下是我在搜索过程中遇到的其他一些网站：

the-echoplex.net

css-tricks.com

我是这样试的，不一样

.nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
  color: green;
}

.foot {
  align-self: flex-end;
  color: red;
}
<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен (!!!)
      </div>
    </li>
  </ul>
</div>

但这是应该的，但是从编写代码的角度来看它是丑陋的

.nav {}

.nav-item {
  list-style-type: none;
}

.nav-link {
  font-size: 1.1rem;
}

.foot {
  margin-top: 200px;
}
<div>
  <ul class="nav">
    <li class="nav-item">
      <div class="nav-link">
        1
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        2
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link">
        3
      </div>
    </li>
    <li class="nav-item">
      <div class="nav-link foot">
        внизу прикреплен
      </div>
    </li>
  </ul>
</div>

html
Martin Hope
Dev18
Asked: 2021-11-27 17:34:25 +0000 UTC
  • 0

我用了

border : none

在焦点、活动和悬停时，我仍然在按钮周围看到这个黑色边框，按钮还有其他状态吗？

如何使用 css 去除点击时的黑色边框。

这个属性叫什么，例如如何改变它的颜色？

.clean-label {
  background-color: white;
  color: #29abe2;
  border: none;
  margin-left: 8px;
  text-decoration: none;
}

.clean-label:active {
  border: none;
  text-decoration: none;
}

.clean-label:hover {
  border: none;
  text-decoration: none;
}

.clean-label:focus {
  border: none;
  text-decoration: none;
}
<button class="clean-label">кнопка без каймы</button>

html
Martin Hope
Dev18
Asked: 2021-11-24 18:40:55 +0000 UTC
  • 0

如何对齐输入以使它们处于同一级别并且不依赖于标签文本的长度

.div-detail-general {
  width: 50em;
  margin: 10px;
  border-left-width: 5px;
  border-left-color: #7ac943;
  border-left-style: solid;
}

.div-detail-general h3 {
  margin: 0 0 0 8px;
}

.list-content-page-detail {
  list-style: none;
}

.list-content-page-detail label {
  font-size: 0.8em;
  margin: 0 0 0 18px;
}

.list-content-page-detail li {}

.label-search-list {}

.input-list-detail {
  border-color: #8d9ab1;
  width: 32em;
  height: 2em;
  margin: 8px 2px;
}
<div class="div-detail-general">
  <h3>Заголовок</h3>
  <ul class="list-content-page-detail">
    <li>
      <label for="text1">Текст ок</label>
      <input type="text" class="input-list-detail" name="text1" id="text1">
    </li>
    <li>
      <label for="text2">Текст</label>
      <input type="search" class="input-list-detail label-search-list" name="text2" id="text2">
    </li>
    <li>
      <label for="text3">Текстик</label>
      <input type="search" class="input-list-detail" name="text3" id="text3">
    </li>
    <li>
      <label for="text4">Текст длинный</label>
      <input type="datetime-local" class="input-list-detail" name="text4" id="text4">
    </li>
  </ul>
</div>

css